websocket 技术文档

websocket 是服务器推送技术的一种，最大的特点是服务器可以主动向客户端推送消息，客户端也可以主动向服务器发送消息。

特点：

建立在 TCP 协议之上，服务器端的实现比较容易。
与 HTTP 协议有着良好的兼容性。默认端口也是80和443，并且握手阶段采用 HTTP 协议，因此握手时不容易屏蔽，能通过各种 HTTP 代理服务器。
数据格式比较轻量，性能开销小，通信高效。
可以发送文本，也可以发送二进制数据。
没有同源限制，客户端可以与任意服务器通信。
协议标识符是ws（如果加密，则为wss），服务器网址就是 URL。

客户端API

websocket构造函数 – 用于新建实例

// 执行下面的语句，客户端便会与服务端进行连接
var ws = new WebSocket('ws://localhost:8080');

webSocket.readyState – 实例对象的当前状态（4种）

CONNECTING：值为0，表示正在连接。
OPEN：值为1，表示连接成功，可以通信了。
CLOSING：值为2，表示连接正在关闭。
CLOSED：值为3，表示连接已经关闭，或者打开连接失败。

webSocket.onopen – 连接成功后的回调函数

ws.onopen = function () {
  ws.send('Hello World!');
}

webSocket.onmessage – 收到服务端数据的回调函数

ws.onmessage = function(event) {
  var data = event.data;
  // 处理数据
  // 服务端数据可能为文本，二进制数据
};

webSocket.onclose – 关闭连接的回调函数

ws.onclose = function (event) {
  var code = event.code;
  var reason = event.reason;
  var wasClean = event.wasClean;
  // 。。。
}

webSocket.send() – 向服务端发送数据

ws.send('send message');

webSocket.onerror – 报错时的回调函数

socket.onerror = function(event) {
  // 。。。
};

服务器端实现

常用的 Node 实现有以下三种。
- µWebSockets
- Socket.IO（https://socket.io/docs/）
- WebSocket-Node

websocket的兼容性

这里写图片描述

websocket部分详见阮一峰websocket教程, 下面介绍一个socket.io的简单用法：

socket.io 是基于websocket封装的js库
客户端：

npm install socket.io-client 

import io from 'socket.io-client'
// 或者 <script src="/socket.io/socket.io.js"></script>

const socket = io('http://localhost');
socket.on('open', ()=>{
    // ....
})

socket.on('connect', (msg) => {
    //console.log(msg)
})

socket.emit('new_msg', (msg) =>{
    // 与服务端统一函数名称， 实时获取服务端推送的数据
})

服务端：

此处贴出官网简单例子，详看官网实例以及文档
这里写图片描述

猜你喜欢