websocket使用方法

前言

最近项目用到了websocket接口，用来做长连接，监听服务器数据变化，保持各终端数据同步。

用下来发现确实很好用，避免了轮询，开销小，而且最重要的是没有同源策略限制。

websocket

WebSocket 是一种在单个TCP 连接上进行全双工通信的协议，和http(1.1)那种请求-响应式的半双工不一样的是，WebSocket可以让客户端和服务器之间交互数据。并且允许服务端主动向客户端推送数据。

websocket特点

• 建立在TCP协议之上，与HTTP协议有着良好的兼容性，默认端口也是80/443；
• 握手阶段采用HTTP协议，能通过各种HTTP代理服务器；
• 数据格式轻量，开销小，通信高效；
• 没有同源策略限制，客户端可以与任意浏览器通信。

websocket原理

Websocket 通过HTTP(1.1)协议的101状态码进行握手。

与HTTP的三次握手不同的是，Websocket一次握手可以建立连接。

Websocket借用HTTP与服务器进行‘握手’，并通过协议升级成Websocket协议。

websocket使用

属性	描述
Socket.readyState	只读属性 readyState 表示连接状态，可以是以下值：- 0 - 表示连接尚未建立。1 - 表示连接已建立，可以进行通信。2 - 表示连接正在进行关闭。 3 - 表示连接已经关闭或者连接不能打开。

事件	事件处理程序	描述
open	Socket.onopen	连接建立时触发
message	Socket.onmessage	客户端接收服务端数据时触发
error	Socket.onerror	通信发生错误时触发
close	Socket.onclose	连接关闭时触发

示例代码

// 创建WebSocket连接.
const socket = new WebSocket('ws://localhost:8080');
// 连接成功触发
socket.addEventListener('open', function (event) {
    socket.send('Hello Server!');
});
// 监听消息
socket.addEventListener('message', function (event) {
    console.log('Message from server ', event.data);
});

结语

本文到此结束，谢谢大家的观看！

如有问题，欢迎各位指正！