node.js使用vue-native-websocket实现websocket通信 实测有效
Vue2、websocket 与node.js接口 本地测试
1. 安装vue-native-websocket模块
2. yarn add vue-native-websocket
或者用
npm install vue-native-websocket --save
3. 在main.js中引入websocket
项目中main.js使用如下图
封装websocket的api
参考https://blog.csdn.net/m0_38134431/article/details/105794108
我自己封装的
let ws = null
let messageCallback = null //ws返回成功的回调函数
let setIntervalWS = null
// 初始化websocket
function initWebSocket(url) {
if (!ws) {
ws = new WebSocket(url)
ws.onmessage = function (e) {
websocketOnmessage(e)
}
ws.onopen = function () {
websocketOpen()
}
ws.onclose = function (e) {
websocketClose(e)
}
ws.onerror = function () {
websocketError()
}
}
}
// 发送数据
function websocketSend(agentData) {
// 添加状态判断
//OPEN时，发送消息
if (ws.readyState === ws.OPEN) {
setIntervalWS = setInterval(() => {
ws.send(JSON.stringify(agentData)) // 发给后端的数据需要字符串化
}, 1000)
//CLOSED时，尝试重连，重连成功，继续发送消息
} else if (ws.readyState === ws.CLOSED) {
retry()
//重连成功，则继续发送
if (ws.readyState === ws.OPEN) {
setIntervalWS = setInterval(() => {
ws.send(JSON.stringify(agentData)) // 发给后端的数据需要字符串化
}, 1000)
}
}
}
// 返回数据
function websocketOnmessage(e) {
messageCallback(JSON.parse(e.data))
}
// 建立连接
function websocketOpen(e) {
console.log('ws连接建立')
}
// 连接失败
function websocketError() {
console.log('ws连接失败,尝试重连')
clearInterval(setIntervalWS)
ws.close()
initWebSocket(url)
}
// 关闭连接
function websocketClose(e) {
clearInterval(setIntervalWS)
ws.close()
ws = null
}
// 重连函数
function retry() {
let maxRetry = 5;
if (maxRetry == 0 || ws != null) {
clearInterval(setIntervalWS)
return false
}
//每3秒一次重连，最多5次
setIntervalWS = setInterval(() => {
ws.onerror()
}, 3000)
}
/**
* 发起websocket请求函数
* @param {type} 0为心跳,1为单次 发送数据的模式
* @param {string} url ws连接地址
* @param {Object} agentData 传给后台的参数
* @param {function} successCallback 接收到ws数据，对数据进行处理的回调函数
*/
export function sendWebsocketPing(type, url, agentData, successCallback) {
initWebSocket(url)
messageCallback = successCallback
switch (type) {
case 0:
websocketSend(agentData)
break;
case 1:
ws.send(agentData)
break;
default:
break;
}
}
/**
* 关闭websocket函数
*/
export function closeWebsocket() {
if (ws) {
ws.onclose() // 关闭websocket
console.log('ws连接关闭')
}
}
新建server.js文件，用于写node.js接口，
安装nodejs-websocket模块npm install websocket
用cmd或者git bash进入项目目录，然后命令行输入node server.js，启动后台服务。文件如下：
var WebSocketServer = require('websocket').server;
var http = require('http');
var json = require('./myTest')
var str1 = "{\"action\": \"stat.nodes\", \"time\": 1590035916, \"data\": {\"nodes\": [{\"fd\": 19, \"ip\": \"192.168.10.11\", \"port\": 55296, \"allow\": true, \"down\": false, \"nodeName\": \"itv-auth-node-138121\", \"mainPort\": 8088, \"group\": \"hot\", \"targetUrl\": \"http://auth.liaowo.test\", \"version\": \"dev - 0\", \"runtime\": \"php: 7.3.18-1+ubuntu18.04.1+deb.sury.org+1, swoole: 4.5.1\", \"weights\": 0.0221}, {\"fd\": 233, \"ip\": \"角卷绵芽\", \"port\": 520, \"allow\": true, \"down\": false, \"nodeName\": \"咚咚咚\", \"mainPort\": 520, \"group\": \"hot\", \"targetUrl\": \"不是我的错吧\", \"version\": \"dev - 0\", \"runtime\": \"php: 7.3.18-1+ubuntu18.04.1+deb.sury.org+1, swoole: 4.5.1\", \"weights\": 0.0221}], \"dispatch_weights\": [{\"fd\": 19, \"weight\": 9997}], \"dispatch_count\": []}}";
var str2 = "{\"action\":\"stat.server\",\"time\":1590045218,\"data\":{\"info\":{\"name\":\"itv-auth-lb-138122\",\"version\":\"dev\",\"build_date\":\"0\",\"runtime_info\":\"php: 7.3.14-6+ubuntu16.04.1+deb.sury.org+1, swoole: 4.4.18\"},\"stat\":{\"server\":{\"start_time\":1590045183,\"connection_num\":2,\"accept_count\":3,\"close_count\":1,\"worker_num\":2,\"idle_worker_num\":1,\"tasking_num\":0,\"request_count\":31,\"worker_request_count\":1,\"worker_dispatch_count\":0,\"coroutine_num\":2},\"worker\":[{\"event_num\":8,\"signal_listener_num\":0,\"aio_task_num\":0,\"aio_worker_num\":2,\"c_stack_size\":2097152,\"coroutine_num\":2,\"coroutine_peak_num\":2,\"coroutine_last_cid\":191,\"pid\":5197,\"timer\":2,\"mem_usage\":3895688,\"mem_peak_usage\":3960464,\"stat_redis\":{\"consumer_num\":0,\"producer_num\":0,\"queue_num\":0,\"create\":0,\"max\":4,\"min\":0},\"http_pool\":null},{\"event_num\":6,\"signal_listener_num\":1,\"aio_task_num\":0,\"aio_worker_num\":2,\"c_stack_size\":2097152,\"coroutine_num\":4,\"coroutine_peak_num\":5,\"coroutine_last_cid\":166,\"pid\":5194,\"timer\":6,\"mem_usage\":3997240,\"mem_peak_usage\":4067208,\"stat_redis\":{\"consumer_num\":0,\"producer_num\":0,\"queue_num\":1,\"create\":1,\"max\":4,\"min\":0},\"http_pool\":null},{\"event_num\":8,\"signal_listener_num\":0,\"aio_task_num\":0,\"aio_worker_num\":2,\"c_stack_size\":2097152,\"coroutine_num\":4,\"coroutine_peak_num\":4,\"coroutine_last_cid\":292,\"pid\":5196,\"timer\":4,\"mem_usage\":5784680,\"mem_peak_usage\":6049248,\"stat_redis\":{\"consumer_num\":0,\"producer_num\":0,\"queue_num\":0,\"create\":0,\"max\":4,\"min\":0},\"http_pool\":null}],\"auth\":{\"accept\":{\"count\":0,\"qps\":0,\"qps_peak\":0},\"refuse\":{\"count\":0,\"qps\":0,\"qps_peak\":0},\"accept_m3u8\":{\"count\":0,\"qps\":0,\"qps_peak\":0},\"accept_ts\":{\"count\":0,\"qps\":0,\"qps_peak\":0},\"upstream_err\":{\"count\":0,\"qps\":0,\"qps_peak\":0},\"not_found\":{\"count\":0,\"qps\":0,\"qps_peak\":0},\"other_err\":{\"count\":0,\"qps\":0,\"qps_peak\":0},\"expired\":{\"count\":0,\"qps\":0,\"qps_peak\":0},\"invalid_sign\":{\"count\":0,\"qps\":0,\"qps_peak\":0},\"bad_ip\":{\"count\":0,\"qps\":0,\"qps_peak\":0},\"bad_self\":{\"count\":0,\"qps\":0,\"qps_peak\":0},\"bad_sess\":{\"count\":0,\"qps\":0,\"qps_peak\":0},\"bad_sign\":{\"count\":0,\"qps\":0,\"qps_peak\":0},\"secret_url\":{\"count\":0,\"qps\":0,\"qps_peak\":0},\"redis_err\":{\"count\":0,\"qps\":0,\"qps_peak\":0}},\"os\":{\"network\":{\"enp0s8\":{\"rx_bytes\":7479.24,\"tx_bytes\":19874.42,\"load_up\":0.03,\"load_down\":0.01,\"load\":0.02,\"load_wa\":0.02},\"enp0s3\":{\"rx_bytes\":0,\"tx_bytes\":0,\"load_up\":0,\"load_down\":0,\"load\":0,\"load_wa\":0},\"enp0s9\":{\"rx_bytes\":2414.68,\"tx_bytes\":182.16,\"load_up\":0,\"load_down\":0,\"load\":0,\"load_wa\":0}},\"disk\":{\"sdb\":{\"tps\":0,\"rkByteSec\":0,\"wkByteSec\":0,\"avgquSz\":0,\"r_await\":0,\"w_await\":0,\"await\":0,\"util\":0,\"util_wa\":0,\"load_read\":0,\"load_write\":0,\"load\":0,\"load_wa\":0},\"sda\":{\"tps\":0,\"rkByteSec\":0,\"wkByteSec\":0,\"avgquSz\":0,\"r_await\":0,\"w_await\":0,\"await\":0,\"util\":0,\"util_wa\":0,\"load_read\":0,\"load_write\":0,\"load\":0,\"load_wa\":0},\"sda1\":{\"tps\":0,\"rkByteSec\":0,\"wkByteSec\":0,\"avgquSz\":0,\"r_await\":0,\"w_await\":0,\"await\":0,\"util\":0,\"util_wa\":0,\"load_read\":0,\"load_write\":0,\"load\":0,\"load_wa\":0}}}}}}";
var server = http.createServer(function(request, response) {
console.log((new Date()) + ' Received request for ' + request.url);
response.writeHead(404);
response.end();
});
server.listen(8080, function() {
console.log((new Date()) + ' 已经连接上8080');
});
wsServer = new WebSocketServer({
httpServer: server,
});
wsServer.on('request', function(request) {
//当前的连接
var connection = request.accept(null, request.origin);
// setInterval(function(){
//
// connection.sendUTF(json)
//
// },500)
console.log((new Date()) + '已经建立连接');
connection.on('message', function(message) {
if (message.type === 'utf8') {
console.log('Received Message: ' + message.utf8Data);
//connection.sendUTF(str1);
connection.sendUTF(str1)
}
else if (message.type === 'binary') {
console.log('Received Binary Message of ' + message.binaryData.length + ' bytes');
}
});
connection.on('close', function(reasonCode, description) {
console.log((new Date()) + ' Peer ' + connection.remoteAddress + '断开连接');
});
});
最后记得main.js的钩子函数中，实例化websocket
const ws = this.$websocket ws.createSocket() 若要发送数据 ws.sendWSPush('数据')
var WebSocketServer = require('websocket').server;
var http = require('http');
var json = require('./myTest')
var str1 = "{\"action\": \"stat.nodes\", \"time\": 1590035916, \"data\": {\"nodes\": [{\"fd\": 19, \"ip\": \"192.168.10.11\", \"port\": 55296, \"allow\": true, \"down\": false, \"nodeName\": \"itv-auth-node-138121\", \"mainPort\": 8088, \"group\": \"hot\", \"targetUrl\": \"http://auth.liaowo.test\", \"version\": \"dev - 0\", \"runtime\": \"php: 7.3.18-1+ubuntu18.04.1+deb.sury.org+1, swoole: 4.5.1\", \"weights\": 0.0221}, {\"fd\": 233, \"ip\": \"角卷绵芽\", \"port\": 520, \"allow\": true, \"down\": false, \"nodeName\": \"咚咚咚\", \"mainPort\": 520, \"group\": \"hot\", \"targetUrl\": \"不是我的错吧\", \"version\": \"dev - 0\", \"runtime\": \"php: 7.3.18-1+ubuntu18.04.1+deb.sury.org+1, swoole: 4.5.1\", \"weights\": 0.0221}], \"dispatch_weights\": [{\"fd\": 19, \"weight\": 9997}], \"dispatch_count\": []}}";
var str2 = "{\"action\":\"stat.server\",\"time\":1590045218,\"data\":{\"info\":{\"name\":\"itv-auth-lb-138122\",\"version\":\"dev\",\"build_date\":\"0\",\"runtime_info\":\"php: 7.3.14-6+ubuntu16.04.1+deb.sury.org+1, swoole: 4.4.18\"},\"stat\":{\"server\":{\"start_time\":1590045183,\"connection_num\":2,\"accept_count\":3,\"close_count\":1,\"worker_num\":2,\"idle_worker_num\":1,\"tasking_num\":0,\"request_count\":31,\"worker_request_count\":1,\"worker_dispatch_count\":0,\"coroutine_num\":2},\"worker\":[{\"event_num\":8,\"signal_listener_num\":0,\"aio_task_num\":0,\"aio_worker_num\":2,\"c_stack_size\":2097152,\"coroutine_num\":2,\"coroutine_peak_num\":2,\"coroutine_last_cid\":191,\"pid\":5197,\"timer\":2,\"mem_usage\":3895688,\"mem_peak_usage\":3960464,\"stat_redis\":{\"consumer_num\":0,\"producer_num\":0,\"queue_num\":0,\"create\":0,\"max\":4,\"min\":0},\"http_pool\":null},{\"event_num\":6,\"signal_listener_num\":1,\"aio_task_num\":0,\"aio_worker_num\":2,\"c_stack_size\":2097152,\"coroutine_num\":4,\"coroutine_peak_num\":5,\"coroutine_last_cid\":166,\"pid\":5194,\"timer\":6,\"mem_usage\":3997240,\"mem_peak_usage\":4067208,\"stat_redis\":{\"consumer_num\":0,\"producer_num\":0,\"queue_num\":1,\"create\":1,\"max\":4,\"min\":0},\"http_pool\":null},{\"event_num\":8,\"signal_listener_num\":0,\"aio_task_num\":0,\"aio_worker_num\":2,\"c_stack_size\":2097152,\"coroutine_num\":4,\"coroutine_peak_num\":4,\"coroutine_last_cid\":292,\"pid\":5196,\"timer\":4,\"mem_usage\":5784680,\"mem_peak_usage\":6049248,\"stat_redis\":{\"consumer_num\":0,\"producer_num\":0,\"queue_num\":0,\"create\":0,\"max\":4,\"min\":0},\"http_pool\":null}],\"auth\":{\"accept\":{\"count\":0,\"qps\":0,\"qps_peak\":0},\"refuse\":{\"count\":0,\"qps\":0,\"qps_peak\":0},\"accept_m3u8\":{\"count\":0,\"qps\":0,\"qps_peak\":0},\"accept_ts\":{\"count\":0,\"qps\":0,\"qps_peak\":0},\"upstream_err\":{\"count\":0,\"qps\":0,\"qps_peak\":0},\"not_found\":{\"count\":0,\"qps\":0,\"qps_peak\":0},\"other_err\":{\"count\":0,\"qps\":0,\"qps_peak\":0},\"expired\":{\"count\":0,\"qps\":0,\"qps_peak\":0},\"invalid_sign\":{\"count\":0,\"qps\":0,\"qps_peak\":0},\"bad_ip\":{\"count\":0,\"qps\":0,\"qps_peak\":0},\"bad_self\":{\"count\":0,\"qps\":0,\"qps_peak\":0},\"bad_sess\":{\"count\":0,\"qps\":0,\"qps_peak\":0},\"bad_sign\":{\"count\":0,\"qps\":0,\"qps_peak\":0},\"secret_url\":{\"count\":0,\"qps\":0,\"qps_peak\":0},\"redis_err\":{\"count\":0,\"qps\":0,\"qps_peak\":0}},\"os\":{\"network\":{\"enp0s8\":{\"rx_bytes\":7479.24,\"tx_bytes\":19874.42,\"load_up\":0.03,\"load_down\":0.01,\"load\":0.02,\"load_wa\":0.02},\"enp0s3\":{\"rx_bytes\":0,\"tx_bytes\":0,\"load_up\":0,\"load_down\":0,\"load\":0,\"load_wa\":0},\"enp0s9\":{\"rx_bytes\":2414.68,\"tx_bytes\":182.16,\"load_up\":0,\"load_down\":0,\"load\":0,\"load_wa\":0}},\"disk\":{\"sdb\":{\"tps\":0,\"rkByteSec\":0,\"wkByteSec\":0,\"avgquSz\":0,\"r_await\":0,\"w_await\":0,\"await\":0,\"util\":0,\"util_wa\":0,\"load_read\":0,\"load_write\":0,\"load\":0,\"load_wa\":0},\"sda\":{\"tps\":0,\"rkByteSec\":0,\"wkByteSec\":0,\"avgquSz\":0,\"r_await\":0,\"w_await\":0,\"await\":0,\"util\":0,\"util_wa\":0,\"load_read\":0,\"load_write\":0,\"load\":0,\"load_wa\":0},\"sda1\":{\"tps\":0,\"rkByteSec\":0,\"wkByteSec\":0,\"avgquSz\":0,\"r_await\":0,\"w_await\":0,\"await\":0,\"util\":0,\"util_wa\":0,\"load_read\":0,\"load_write\":0,\"load\":0,\"load_wa\":0}}}}}}";
var server = http.createServer(function(request, response) {
console.log((new Date()) + ' Received request for ' + request.url);
response.writeHead(404);
response.end();
});
server.listen(8080, function() {
console.log((new Date()) + ' 已经连接上8080');
});
wsServer = new WebSocketServer({
httpServer: server,
});
wsServer.on('request', function(request) {
//当前的连接
var connection = request.accept(null, request.origin);
// setInterval(function(){
//
// connection.sendUTF(json)
//
// },500)
console.log((new Date()) + '已经建立连接');
connection.on('message', function(message) {
if (message.type === 'utf8') {
console.log('Received Message: ' + message.utf8Data);
//connection.sendUTF(str1);
connection.sendUTF(str1)
}
else if (message.type === 'binary') {
console.log('Received Binary Message of ' + message.binaryData.length + ' bytes');
}
});
connection.on('close', function(reasonCode, description) {
console.log((new Date()) + ' Peer ' + connection.remoteAddress + '断开连接');
});
});
