首先,感谢csdn各位大佬们对创建websocket的解释!
1.安装模块
npm install nodejs-websocket
2.搭建websocket服务端
这个是一个js文件
//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');
})
3.搭建websocket客户端
写个简单的客户端
这个是页面写的内容
//建立连接
var ws = new WebSocket("ws://localhost:2002");
ws.onopen = function(evt) {
console.log("Connection open ...");
let sendobj={
id:"0001",
name:"发送的值"
}
console.log(sendobj);
ws.send(sendobj);
};
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);
}
4.启动上面写好的js
命令行运行js,启动websocket服务器
node websocket.js
启动结束以后显示一下画面【这个是用心跳机制显示的页面】
浏览器页面:有个localhost,下面是header
下面是message,说明是信息发送过来了。
.
===========================================================
下面是如果想用心跳机制
【页面】
// //serverUrl心跳机制
// let socketUrl = 'wss://echo.websocket.org1';
let socketUrl = 'ws://localhost:2002';
//保存websocket对象
let socket;
// reConnect函数节流标识符
// 避免重新连接
let flag = true;
//心跳机制
let heart = {
timeOut: 3000,
timeObj: null,
serverTimeObj: null,
start: function() {
console.log('start');
let self = this;
//清除延时器
this.timeObj && clearTimeout(this.timeObj);
this.serverTimeObj && clearTimeout(this.serverTimeObj);
this.timeObj = setTimeout(function() {
//这里发送一个心跳,后端收到后,返回一个心跳消息,
//onmessage拿到返回的心跳就说明连接正常
socket.send('兄弟,你还好吗?'); //发送消息,服务端返回信息,即表示连接良好,可以在socket的onmessage事件重置心跳机制函数
//定义一个延时器等待服务器响应,若超时,则关闭连接,重新请求server建立socket连接
self.serverTimeObj = setTimeout(function() {
socket.close();
reConnect(socketUrl);
}, self.timeOut)
// console.log(self.serverTimeObj,"000");
}, this.timeOut)
// console.log(this.timeObj,"???");
}
}
//建立websocket连接函数
function createWebsocket(url) {
try {
socket = new WebSocket(url);
init();
} catch (e) {
//进行重连;
console.log('websocket连接错误');
reConnect(socketUrl);
}
}
//对WebSocket各种事件进行监听
function init() {
socket.onopen = function() {
//连接已经打开
//重置心跳机制
console.log(event.data, "连接已经打开");
heart.start();
}
socket.onmessage = function(event) {
//通过event.data获取server发送的信息
//对数据进行操作
console.log(event.data, "对数据进行操作");
//收到消息表示连接正常,所以重置心跳机制
heart.start();
}
socket.onerror = function() {
//报错+重连
console.log('socket连接出错');
reConnect(socketUrl);
}
socket.onclose = function() {
console.log('socket连接关闭');
}
}
//重连函数
//因为重连函数会被socket事件频繁触发,所以通过函数节流限制重连请求发送
function reConnect(url) {
if (!flag) {
return;
}
flag = false;
//没连接上会一直重连,设置延迟避免请求过多
setTimeout(function() {
console.log("123");
createWebsocket(url);
flag = true;
}, 3000)
}
createWebsocket(socketUrl)
// 第一步创建WebSocket连接,
// 第二步,调用init,封装各种监听事件
// 第三步,发生错误,重连;
// 没有错误,正常连接,重置心跳机制
**
使用ws-廖雪峰
**