关于sdk:通过融云-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 发送
});

近期应用融云开发聊天页面, 通过抓包, 发现融云 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 发送
});