在vue中使用websocket的小demo

WebSocket是HTML5下一种新的协议（协议名为"ws"）。

我们常用的http协议是一种无状态协议，对于事物的处理没有记忆能力，每次请求都是独立的，而且需要浏览器主动向服务器发送请求，服务器再相应浏览器的请求。而websocket在建立连接后，可以互相主动发送请求，且无需像hhttp那样每次请求都发送一次冗长的header。

这里简单的写一个demo，认识一下websocket的使用。

场景：后端定时向前端发送时间、随机颜色，前端再把这些数据实时渲染在页面上。前端也可以点击按钮向服务器端发送数据，效果如下图：

这里后端我用express，并使用express-ws提供websocket服务。

步骤0：任意处新建一个文件夹，命名为server，里面再新建一个文件server.js

步骤1:下载express、express-ws

npm i express express-ws

步骤2：启动服务器，测试是否启动成功

// server.js
// 导入
const express = require("express");
// 创建web服务器
const app = express();

// 监听请求
// 只要用户在浏览器访问http://localhost:3000/test，就会向浏览器相应下面这个h1标签
app.get("/test", (req, res) => {
  res.send("
你好，express
");
});

// 启动服务器，端口设置为3000
app.listen(3000, (err) => {
  if (!err) {
    console.log("服务器启动成功，监听端口3000");
  }
});

在server.js中输入以上代码，在命令行输入（进入到根目录输入）node ./server.js，回车,命令行出现以下输出，代表启动服务器成功：

        

 且在浏览器请求localhost:3000/test，出现我们预期的测试信息：

 好现在我们已经启动了一个express服务器，我们接着 在server.js加入websocket服务，完整代码如下：

// 导入
const express = require("express");
// 创建web服务器
const app = express();
const ws = require("express-ws");
// 将 ws 混入到 app中，在模块化开发时也可混入在 Router 对象中
const expressWs = ws(app);

// 监听请求
// 只要用户在浏览器访问http://localhost:3000/test，就会向浏览器相应下面这个h1标签
app.get("/test", (req, res) => {
  res.send("
你好，express
");
});

app.ws("/socket", (ws, req) => {
  // ws:websocket 实例，该实例可以监听来自客户端的消息发送事件
  // req:浏览器请求实例
  // 使用定时器不停的向客户端推动消息
  let timer = setInterval(() => {
    ws.send( JSON.stringify({ color: "#" + Math.random().toString(16).slice(2, 8), text: new Date(), }));
  }, 3000);

  // 监听断开连接
  ws.on("close", () => {
    console.log("本次连接已关闭");
    clearInterval(timer);
    timer = null;
  });

  // 监听浏览器发来的数据
  ws.on("message", (res) => {
    ws.send( JSON.stringify({ color: "#" + Math.random().toString(16).slice(2, 8), text: `我是浏览器端发送过来的:${res}`})
    );
    clearInterval(timer);
  });
});

// 启动服务器，端口设置为3000
app.listen(3000, (err) => {
  if (!err) {
    console.log("服务器启动成功，监听端口3000");
  }
});

以上，服务器端已准备就绪，接下来就看前端的了。

下面，先为前端代码（vue2）：

这样启动vue项目，websocket就会自动连上了。当我们关闭服务端时，会按照我们设置的时间间隔不断重连。

 如此小demo就大功告成啦。