websocket-js客户端

发表于 分类于 阅读次数：

这里用到 socket.io。

安装
1
npm install socket.io-client

初始化

你可以使用 http(https) 或 ws(wss) 来进行初始化。

1
2
3
4
5
6
import {io} from 'socket.io-client'

const socket = io('http://localhost:8000', {
    reconnectionDelay: 2000,
    autoConnect: true
});

事件
监听事件
1
2
3
4
5
6
7
socket.on('connect', () => {
    console.log('连接成功');
});

socket.on('chat', (res) => {
    console.log(res);
});

socket.on 第一个参数是事件名称，与服务端的事件名称相对应，第二个参数是服务端传递的数据。

‘connect’，’disconnect’，’connect_error’ 等是特殊的事件，在可以在连接发生变化时做一些处理。


提交事件
1
2
3
4
5
socket.emit('chat', {data: this.message});

socket.emit('chat', {data: this.message}, (response) => {
    console.log(response);
});

emit 方法第一个参数是事件名称，第二个参数是要传递的数据，如果服务端对应事件的监听处理函数有返回值，那么该返回值就作为回调函数的参数。


命名空间

命名空间是一种通信通道，允许你通过单个共享连接（也称为“多路复用”）拆分应用程序的逻辑。

1
const socket = io('http://localhost:8000/user');

这里的 ‘/user’ 就是命名空间，若没有显式地规定命名空间，则默认是主命名空间。

一个连接只能有一个命名空间，但是可以创建多个连接来处理不同命名空间的事务。例如：

1
2
3
4
5
const user_socket = io('http://localhost:8000/user');
const order_socket = io('http://localhost:8000/order');

user_socket.on('hello', () => {});
order_socket.on('hello', () => {});

一旦定义命名空间后，只能与服务端具有相同命名空间的 event handlers 通信。


注意：socket.io 每次重新连接都会随机生成一个 session_id，那怎么让一个用户与一个连接永久绑定呢？

那我们可以自己生成一个永久唯一的房间号并在前端 localStorage 中保存，每次与服务端的连接都读取并携带此房号，后端让对话双话都加入此房间，再根据此房间号来转发消息，这样无论 socket.id 怎么变都可以一对一私聊了。

更多内容请看 https://socket.io/docs/v4/。