在vue中如何使用websoket

什么是websoket？
WebSocket是HTML5新增的一种通信协议
为什么要有websoket这种网络通信协议呢？
我们已经有了 HTTP 协议，但通信只能由客户端发起，连续的状态变化，客户端要获知就非常麻烦
我们只能使用"轮询"：每隔一段时候，就发出一个询问，也就是个定时器，间隔一个事件向服务器发送一个http请求，轮询的效率低，非常浪费资源。
而如果通过websoket去实现这种需要连续变化的需求，服务器可以主动向客户端推送信息，客户端也可以主动向服务器发送信息，是真正的双向平等对话，并且没有同源限制，客户端可以与任意服务器通信，协议标识符是ws（如果加密，则为wss），服务器网址就是 URL。
那么我们在项目中如何去使用websoket呢？
我们可以使用原生的websoket对象进行于服务器的链接，但大佬已经为我们进一步封装好了一个npm的包，我们可以采用第三方库

npm i socket.io-client

// 在你需要的地方引入
// 你可以把soket链接写在.vue中，也可以写在js文件中
import io from 'socket.io-client';

// 链接websoket
// 当我们与后端本地调试的时候url就是后端的ip和服务的端口号，后面按需要携带参数即可，注意协议是ws
// 当项目打包上线的时候如果服务器是https的，那么需要wss
const wsio = io('ws://192.168.0.111:42994/' + '?userKey=' + getUserKey());
// 清楚了如何链接websoket之后，我们在链接url的写法上要变化一下，因为本地调试和上线肯定不是一个URl
// 那么，我们可以通过环境变量，我们在开发环境可以给WEB_SOCKET_PATH直接设置成后端ip+端口即可，
// 在测试环境或者正式环境就用对应的域名+端口，总不能每次发包都去手动改吧
// const wsio = io(process.env.WEB_SOCKET_PATH + '?userKey=' + getUserKey());

// 想服务器发送消息，服务器端也会绑定一个send方法，触发他的回调拿到我们传递的参数
// 这个参数可以是一个对象，也可以直接是一个基本数据类型
wsio.emit('send', {
    token: 'aaa'
});

//  监听事件回调，message和后端约定好
wsio.on('message', (data) => {
	// 想干什么就干什么
    console.log('progress', data);
});

// 服务器端断开链接,但是服务器并不知道什么时候断开链接，所以需要一个心跳检测
// 也就是前端向服务器端每隔540000发送个消息给服务器，告诉服务器我还活着，也就是你网页没有关闭，
// 如果你关闭了网页，是不是540000之后就没有发送heart了，
// 后端隔了540000没有收到你的消息，那自己断开链接
// 前端和服务器端都做断开链接操作，双重保险
setInterval(() => {
    wsio.emit('heart', {
        token: '111'
    });
}, 540000);

// 断开websoket链接分为两种
// 前端直接断开链接
wsio.close();

当websoket链接成功之后，你就拿到了websoket实例对象。这里描述一下使用场景，就以我的举例，在项目一运行的时候就需要进行websoket链接，就需要向服务端发送消息和监听消息，所以我app.vue中就进行websoket链接，但是我并没有把链接方法写在app.vue中，我写在vuex中的，因为有的业务场景需要在加载某些页面或者说组件的时候才进行消息发送或者消息监听，所以我在vuex中去链接，然后将websoket实例对象存在vuex中，在需要的地方引入这个实例对象，进行消息发送或者消息监听操作就可以了。

以上只是我对websoket的理解和简单的使用，已经可以满足简单的业务场景

soket.io中文文档

标签：websoket,vue,断开,wsio,如何,io,服务器,链接
来源： https://blog.csdn.net/web_zs/article/details/121353170