通过融云 WebSDK 简单了解 WebSocket

近期使用融云开发聊天页面, 通过抓包, 发现融云 SDK 使用 WebSocket 实现与服务端通讯, 由此简单了解下 WebSocket 的使用

需要 WebSocket 的原因:

一句话总结: HTTP 协议只能由客户端发起, 服务端响应. WebSocket 可服务端主动发起, 也可客户端发起. 能实现的场景更多、更复杂

相关资料如下:

融云开发文档: https://docs.rongcloud.cn/v4/

WebSocket Web API: https://developer.mozilla.org/zh-CN/docs/Web/API/WebSocket

WebSocket Node API: socket.io、ws、uWebSockets (任选其一)

融云抓包

测试地址: https://rongcloud.github.io/websdk-demo/api-test/

通过抓包可知, 融云链接 websocket 时还带了 appkey、token、SDK 版本信息

接下来实现一个简单地 客户端 + 服务端示例

Nodejs 服务端

此处示例使用 ws 模块

创建链接:

const Port = '2928';
const wss = new WebSocket.Server({
      port: Port });
wss.on('connection', function (ws, event) {
     
  const url = event.url; // url 为客户端链接地址, 可拼接参数. 比如融云拼接了 appkey 等信息: ?appid=n19xxxxxx&token=xxxxxxxx

  /* 监听链接关闭 */
  ws.on('close', () => {
     
    // 此 ws 链接已断开. do something
  });
});

监听客户端消息:

const Port = '2928';
const wss = new WebSocket.Server({
      port: Port });
wss.on('connection', function (ws, event) {
     
  ws.on('message', function (data) {
     
    console.log('data', data); // 收到客户端发送的数据 do something
  });
});

向客户端发送请求:

const Port = '2928';
const wss = new WebSocket.Server({
      port: Port });
wss.on('connection', function (ws, event) {
     
  ws.send('some data');
});

Web 客户端

具体 API 可参考: WebSocket

建立链接:

const socket = new WebSocket('ws://localhost:2928');
socket.addEventListener('open', function (event) {
     
  // 链接成功, do something
});

监听服务端消息:

const socket = new WebSocket('ws://localhost:2928');
socket.addEventListener('message', function (event) {
     
  console.log('收到服务端发送的数据', event.data);
});

向服务端发送请求:

const socket = new WebSocket('ws://localhost:2928');
socket.addEventListener('open', function (event) {
     
  socket.send('some data'); // 链接后, 调用 send 发送
});