写点什么

通过融云 WebSDK 简单了解 WebSocket

发布于: 2021 年 03 月 16 日

近期使用融云开发聊天页面, 通过抓包, 发现融云 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.iowsuWebSockets (任选其一)


融云抓包


测试地址: 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 发送
复制代码


});
复制代码


用户头像

还未添加个人签名 2021.01.26 加入

还未添加个人简介

评论

发布
暂无评论
通过融云 WebSDK 简单了解 WebSocket