一、什么是websocket
websocket是一种网络通信协议。
由于http协议只能由客户端来发起请求，这个缺陷导致我们在做聊天功能，只能用轮询的方法。这样既麻烦效率又低。于是就有了websocket协议。
特点：客户端可以直接向服务端发起请求，服务端可以主动向客户端发起请求。
二、客户端如何使用
var ws = new WebSocket("wss://echo.websocket.org");
ws.onopen = function(evt) {
console.log("连接websocket");
};
ws.onmessage = function(evt) {
console.log( "收到的消息: " + evt.data);
};
ws.onclose = function(evt) {
console.log("关闭连接");
};
// 发送消息
ws.send('Hello Server!');
使用sockjs-client
SockJS是一个浏览器JavaScript库，它提供了一个类似于网络的对象。SockJS提供了一个连贯的、跨浏览器的Javascript API，它在浏览器和web服务器之间创建了一个低延迟、全双工、跨域通信通道。
在后台，SockJS尝试首先使用原生的WebSockets。如果它失败了，它可以使用多种特定于浏览器的传输协议，并通过类似于网络的抽象来呈现它们。
SockJS旨在为所有现代浏览器和不支持WebSocket协议的环境工作——例如，在限制公司代理的后面。
简单来说SockJS是封装websocket协议的js库。
客户端使用：SockJS-client,
服务端可使用：SockJS-node
用法：
sockjs-client 的用法跟WebSocket协议的用法基本一样：
1.项目里面下载引用SockJS-client
npm install sockjs-client --save
import Sock from 'sockjs-client'
2.连接
const sock = new Sock(url);
// 连接成功后的回调函数
sock.onopen = () => {
console.log('连接成功');
};
// 监听接受到服务器的消息
sock.onmessage = (event) => {
console.log('收到的消息', event.data);
};
// 关闭连接的回调函数
sock.onclose = () => {
};
// 连接错误的回调函数
sock.onerror = (event) => {
console.log('连接错误', event);
};
//发送消息
sock.send('test');
// 关闭连接
sock.close();
三、实践中遇到的问题
项目使用 vue-cli搭建，并使用了vue的状态管理vuex，websocket使用SockJS-client库
1.一个用户多个聊天组，收到的消息如何区分此条消息是包含于哪个聊天组？
-action.js文件
@params nowGroupId:当前聊天的组id
chatData:存放当前聊天组的消息内容
initSocket({ state }) {
sock.onmessage = (event) => {
const dataArr = JSON.parse(event.data);
// 当前收到的消息如果属于当前聊天的组则添加进去
if (dataArr.rId === state.nowGroupId) {
state.chatData.push(JSON.parse(event.data));
}
};
};
