一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第17天，点击查看活动详情。
前言
websocket是网络传输的其中一种协议，在面试中有可能会被面试官提及到，今天利用空闲时间来上手一下websocket的使用，本项目是通过vue作为前端，node作为服务器进行双方的webscoket通信。
🎄了解一下webscoket
WebSocket，是一种网络传输协议，位于
OSI模型的应用层。可在单个TCP连接上进行全双工通信，能更好的节省服务器资源和带宽并达到实时通迅，客户端和服务器只需要完成一次握手，两者之间就可以创建持久性的连接，并进行双向数据传输
🎁在node跑起一个websocket
首先在node下安装一个模块包，npm install nodejs-websocket，然后再websocket中引入模块，接下来是几个步骤
- 通过ws.createServer创建一个websocket服务
- 通过on监听并接收客户端返回的数据，这里可以监听到发送到这个websocket端口的信息
- 通过listen函数打开端口并监听服务是否打开成功
//websocket.js
// 搭建websocket服务器
const ws = require("nodejs-websocket");
var _server = ws.createServer(conn => {
// 接收客户端返回的数据
conn.on("text", function(str) {
console.log(str, "接收客户端传过来的值");
});
//客户端关闭连接
conn.on("close", function() {
});
conn.on("error", function(err) {
//error
console.log(err, "连接报错");
});
});
// 定义端口为2002【端口自己随意定义】
const port = 2002;
_server.listen(port, function() {
console.log("连接成功")
console.log('listening on websocketServer');
})
将我们的websocket.js文件写好之后，通过node websocket.js把服务跑起来，如果成功跑起来，那么我们可以在控制台看到这样的信息
🎎vue中实现一个websocket方法
这是MDN提供的一个小实例
- 通过new Websocket可以开启连接
- 通过addEventListener添加监听open连接成功通信
//建立连接
var ws = new WebSocket("ws://localhost:2002");
ws.onopen = function(evt) {
console.log("Connection open ...");
ws.send('this is a message');
};
ws.onmessage = function(e) {
console.log(typeof e.data);
console.log(e);
ws.close()
};
ws.onclose = function(evt) {
console.log("Connection closed.");
};
ws.onerror = function(err){
console.log(err);
}
客户端的websocket连接也已经建立了，我们这里先写死要发送给服务端的信息，我们打开控制台看下请求发送的情况和具体信息
我们可以看到发送websocket请求的时候和发送ajax的请求是一样的都会在控制台有发送的记录，不同的是控制台的结构不同，发送的数据在message栏中，Data中包含了我们已经发送过去的数据。现在看一下我们的数据是否会成功发送到服务端中，我们查看一下跑node服务端的控制台
服务端发送数据到客户端
回到上面我们可以看到vue中的函数我们已经设置了监听服务端发送过来的消息
ws.onmessage = function(e) {
console.log(typeof e.data);
console.log(e);
ws.close()
};
但是还没有从服务器接收到消息，那是因为服务器还没主动发起信息到客户端，我们再服务端监听到信息后让它发送一条消息
conn.on("text", function(str) {
console.log(str, "接收客户端传过来的值");
conn.send('this is a messagetoo');
});
我们对node服务进行修改之后，要中断正在执行的websocket服务，重启跑一遍，然后我们再检查一下客户端控制台，发现每次发送数据都能接受到服务端发送的数据过来
