vue+websocket使用

前言：
我们前端开发难免会遇到一些东西是后端主动发起的，正常情况都是前端请求接口口后端答复，那么在一些特殊情况下可能需要实时数据，那么这样问题就来了，怎么做？用轮询？当然可以，只不过看使用场景，不过建议还是使用websocket来做会比较好，那么本文简单介绍一下在vue项目中如何使用websocket建立长连接

1：何为Socket.io
Socket.io是一个用 JavaScript 实现的实时双向通信的库，利用它来实现我们的功能会很简单。

socket.io 包含两个部分：

服务器端（server）：运行在 Node.js 服务器上

客户端（client）：运行在浏览器中

可以看看如下的 socket.io 的示例代码，它给出了 socket.io 发出及监听事件的基本用法：

io.on('connection', function(socket){
  socket.emit('request', /* */); // emit an event to the socket
  io.emit('broadcast', /* */); // emit an event to all connected sockets
  socket.on('reply', function(){ /* */ }); // listen to the event
});

2：安装socket.io.client

npm install socket.io-client --save

安装在咱们的生产环境，当然开发也是能用的

3：引入socket.io.client

这里我们在使用地方引入就好了（个人建议放入store）

import io from "socket.io-client"; ---->引入

const socket = io(URL); ---->使用，其中URL为后端给你的接口（后端服务器所在的地址）

4：接下来你就可以用socket里的方法进行连接监听的事件了

//向服务器发送消息
this.socket.emit("xxx", {
    data: this.data
});
这里的“xxx'即是约定的方法名称，也叫做加入房间的方法，data这些就是你要给服务器的数据（你与后端小哥哥的约定具体需要什么）

5：开始监听指定的事件

me.socket.on("xxx", (res) => {
   do-something
});
res即是后端给你返回的数据，你可以在此打印看看有什么，然后可以在这里做一些获取数据后的处理
当然你也可以监听多个事件一样的做法

6：如果断开进行自动重连接

// 监听
socket.on(‘disconnect’, function() {
	console.log(“与服务其断开”);
	// dosomething
});
socket.on("reconnecting", async res => {
	console.log(“尝试重新连接到服务器”);
    // dosomething
 });
 socket.on("connecting", async res => {
    // dosomething
 });
 socket.on("reconnect", async res => {
      // dosomething
 });
  // 重连成功
  socket.on("connect", async res => {
      // dosomething
 });

说明：这个教程只是简单的使用教程后期会不断补充，有写错的地方大家海涵。如果有不懂得也可以提问，如果有看到会尽力解答