在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）：
{{present.text}}
这样启动vue项目，websocket就会自动连上了。当我们关闭服务端时，会按照我们设置的时间间隔不断重连。
如此小demo就大功告成啦。