【实战记录】WebSocket在vue2中的使用

什么是WebSocket

官方说, WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。但是我对网络协议并不了解,用实际用途去解释它就是,它支持服务端主动给客户端发送消息。

在 WebSocket 出现之前,我们要获取服务端的数据只能通过 客户端向服务端发送请求,服务端接到请求后返回数据,但是这样有一个很明显的缺点就是那些需要 频繁接收数据 的场景就需要不断的向服务端发送请求.比如聊天室,实时天气等, 以前的方法就是"轮询",意思就是每隔一段时间,发送一次请求.这样就会有两个很明显的弊端.

一是非常浪费资源,二是做不到真正的实时刷新 WebSocket 的出现很好的解决了这个问题.

WebSocket 创建

执行下面语句之后，客户端就会与服务器进行连接。

WebSocket 对象作为一个构造函数，用于新建 WebSocket 实例。

var ws = new WebSocket('ws://localhost:3000'); 

WebSocket 属性

Socket.readyState 表示连接状态

• 0 - 表示连接尚未建立。
• 1 - 表示连接已建立，可以进行通信。
• 2 - 表示连接正在进行关闭。
• 3 - 表示连接已经关闭或者连接不能打开。