-
2022-05-06 19:42:49
使用node启动本地socket服务
- 创建项目目录
mkdir server
- 初始化 npm
npm init -y
- 安装依赖库
npm i nodejs-websocket -S
- 创建服务文件
const ws = require('nodejs-websocket'); const server = ws.createServer(connect => { connect.on("text", data => { console.log("received: "+data); connect.sendText(data); }); connect.on("close", (code, reason) => { console.log("connection closed!"); }); connect.on('error', ()=>{ console.log("connection error!"); }); }); server.listen('13000', ()=>{ console.log("websocket server start success!"); });
- 启动服务
node server.js
封装简易版 websocket
let webSocket = null; let isConnect = false; // 连接状态 let globalCallbacks = null;// 定义外部接收数据的回调函数 let reConnectNum = 0; // 重连次数 let websocketUrl = 'ws://127.0.0.1:5000'; // 心跳设置 let heartCheck = { heartbeatData: { DevID: { value: 1 }, DevHeart: { value: '1' } },// 心跳包 timeout: 60 * 1000, // 每段时间发送一次心跳包 这里设置为60s heartbeat: null, // 延时发送消息对象(启动心跳新建这个对象,收到消息后重置对象) start: function () { this.heartbeat = setInterval(() => { if (isConnect) { webSocketSend(this.heartbeatData); } else { this.clear(); } }, this.timeout); }, reset: function () { clearInterval(this.heartbeat); this.start(); }, clear: function() { clearInterval(this.heartbeat); } }; // 初始化websocket function initWebSocket(callbacks) { // 此callback为在其他地方调用时定义的接收socket数据的函数 if (callbacks) { if (typeof callbacks === 'object') { globalCallbacks = callbacks; } else { throw new Error('callbacks is not a object'); } } if ('WebSocket' in window) { webSocket = new WebSocket(websocketUrl);// 创建socket对象 } else { console.log('该浏览器不支持websocket!'); return; } // 打开 webSocket.onopen = function() { webSocketOpen(); }; // 接收 webSocket.onmessage = function(e) { webSocketOnMessage(e); }; // 关闭 webSocket.onclose = function(e) { webSocketOnClose(e); }; // 连接发生错误的回调方法 webSocket.onerror = function(e) { webSocketOnError(e); }; } // 连接socket建立时触发 function webSocketOpen() { console.log('WebSocket连接成功'); // 首次握手 // webSocketSend(heartCheck.heartbeatData); isConnect = true; globalCallbacks.openCallback && globalCallbacks.openCallback(); // heartCheck.start(); reConnectNum = 0; } // 客户端接收服务端数据时触发,e为接受的数据对象 function webSocketOnMessage(e) { console.log('websocket信息:'); console.log(e.data); const data = JSON.parse(e.data); // 根据自己的需要对接收到的数据进行格式化 globalCallbacks.getSocketResult(data); // 将data传给在外定义的接收数据的函数 } // socket关闭时触发 function webSocketOnClose(e) { // heartCheck.clear(); isConnect = false; // 断开后修改标识 globalCallbacks.closeCallback && globalCallbacks.closeCallback(); console.log(e); console.log('webSocket已经关闭 (code:' + e.code + ')'); // 被动断开,重新连接 if (e.code === 1006) { if (reConnectNum < 3) { initWebSocket(); ++reConnectNum; } else { console.log('websocket连接不上,请刷新页面或联系开发人员!'); } } } // 连接发生错误的回调方法 function webSocketOnError(e) { // heartCheck.clear(); isConnect = false; // 断开后修改标识 console.log('WebSocket连接发生错误:'); console.log(e); } // 发送数据 function webSocketSend(data) { webSocket.send(JSON.stringify(data));// 在这里根据自己的需要转换数据格式 } // 在其他需要socket地方主动关闭socket function closeWebSocket(e) { webSocket.close(); // heartCheck.clear(); isConnect = false; reConnectNum = 0; } // 在其他需要socket地方接受数据 function getSock(callback) { globalCallbacks.getSocketResult = callback; } // 在其他需要socket地方调用的函数,用来发送数据及接受数据 function sendSock(agentData) { // 下面的判断主要是考虑到socket连接可能中断或者其他的因素,可以重新发送此条消息。 switch (webSocket.readyState) { // CONNECTING:值为0,表示正在连接。 case webSocket.CONNECTING: setTimeout(function() { sendSock(agentData); }, 1000); break; // OPEN:值为1,表示连接成功,可以通信了。 case webSocket.OPEN: webSocketSend(agentData); break; // CLOSING:值为2,表示连接正在关闭。 case webSocket.CLOSING: setTimeout(function() { sendSock(agentData); }, 1000); break; // CLOSED:值为3,表示连接已经关闭,或者打开连接失败。 case webSocket.CLOSED: // do something break; default: // this never happens break; } } export default { initWebSocket, closeWebSocket, sendSock, getSock };
在 Vue 中使用
- 入口函数挂载
// main.js import socketApi from '@/utils/socket'; Vue.prototype.$socketApi = socketApi;
- 组件中使用
createWebSocket() { const callbacks = { getSocketResult: this.getSocketResult, openCallback: this.openCallback, closeCallback: this.closeCallback }; this.$socketApi.initWebSocket(callbacks); }, // 创建连接 created() { this.createWebSocket() } // 关闭连接 beforeDestroy() { this.$socketApi.closeWebSocket(); } // 发送消息 this.$socketApi.sendSock();
更多相关内容 -
本地WebSocketServer测试.html
2019-07-23 11:39:39本地测试websocket的连接通信,超级方便操作,可实时查看服务器响应。 -
vue-native-websocket:带有vuex集成的本地websocket
2021-05-02 15:54:51vue-native-websocket· Vuejs 2和Vuex的本地websocket实现安装yarn add vue-native-websocket# ornpm install vue-native-websocket --save用法配置通过URL字符串自动进行套接字连接import VueNativeSock from 'vue... -
Websocket测试工具
2017-08-15 09:19:27用支持Websocket的浏览器打开本网页,可以与Websocket服务器进行通信交互,也可以验证Websocket服务器消息处理是否正确。 -
和睦hub-api:使用中心的本地websocket API的和睦中心API
2021-02-10 06:58:06Harmony Hub API(带有本地websocket) 该模块趋向于替换旧版XMPP API,该旧版XMPP API已由Firemware 4.15.206删除( )。 它使用中心的本地websocket API。 更新23/12/2018 Logitech撤销了他对XMPP API的决定。 ... -
windows本地部署websocket
2021-07-02 16:34:281官网下载 安装包 ...将下载下来的文件进行解压,解压之后可以看到里面有一个.exe的执行文件 ...然后配置环境变量path,径路指向websocket的可执行文件所在路径,这样就可以直接使用websocketd的命令了 ...1官网下载 安装包
官网链接:http://websocketd.com/
将下载下来的文件进行解压,解压之后可以看到里面有一个.exe的执行文件
然后配置环境变量path,径路指向websocket的可执行文件所在路径,这样就可以直接使用websocketd的命令了
-
windows本地部署websocket服务
2021-03-16 21:51:18想直接在我的机器上部署一个websocket服务,正好看到有一个这样的工具websocketd 官网链接:http://websocketd.com/ 下载对应的程序 我是windows机器 下载好后解压缩 使用方法是这样的,这个工具是命令行...想直接在我的机器上部署一个websocket服务,正好看到有一个这样的工具websocketd
下载对应的程序
我是windows机器
下载好后解压缩
使用方法是这样的,这个工具是命令行启动的,然后还需要运行一个自定义的后台脚本,就是服务器脚本,这个脚本里我们来自定义产生什么数据.这个工具,对脚本是不限制语言的,shell,bash,java,python都支持.
我这里本机已经安装了python环境,所以我用python脚本写一个简单的脚本
比较简单,就是一个计数器,每隔一秒计数+1
然后在当前文件夹里面打开命令行窗口,输入cmd回车
输入命令,注意到脚本面前,还有一个python,告诉工具使用python执行这个脚本
websocketd --port=10000 python counter.py
然后输出信息,表示已经启动成功了,
自己在js里面进行测试,我封装了一个websocket的插件
-
易语言-易语言自带组件搭建Websocket服务器
2021-06-26 07:05:17E自带组件搭建Websocket服务器,可以收发消息 -
本地测试websocket连接通信案例
2019-07-23 12:10:24本文不对websocket作详细介绍,需要具体了解的童鞋请自己查资料。 直接上图: 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta ...本文不对websocket作详细介绍,需要具体了解的童鞋请自己查资料。
直接上图:
代码如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>本地websocket测试</title> <meta name="robots" content="all" /> <meta name="keywords" content="本地,websocket,测试工具" /> <meta name="description" content="本地,websocket,测试工具" /> <style> .btn-group{ display: inline-block; } </style> </head> <body> <input type='text' value='通信地址, ws://开头..' class="form-control" style='width:390px;display:inline' id='wsaddr' /> <div class="btn-group" > <button type="button" class="btn btn-default" onclick='addsocket();'>连接</button> <button type="button" class="btn btn-default" onclick='closesocket();'>断开</button> <button type="button" class="btn btn-default" onclick='$("#wsaddr").val("")'>清空</button> </div> <div class="row"> <div id="output" style="border:1px solid #ccc;height:365px;overflow: auto;margin: 20px 0;"></div> <input type="text" id='message' class="form-control" style='width:810px' placeholder="待发信息" onkeydown="en(event);"> <span class="input-group-btn"> <button class="btn btn-default" type="button" onclick="doSend();">发送</button> </span> </div> </div> </body> <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> <script language="javascript" type="text/javascript"> function formatDate(now) { var year = now.getFullYear(); var month = now.getMonth() + 1; var date = now.getDate(); var hour = now.getHours(); var minute = now.getMinutes(); var second = now.getSeconds(); return year + "-" + (month = month < 10 ? ("0" + month) : month) + "-" + (date = date < 10 ? ("0" + date) : date) + " " + (hour = hour < 10 ? ("0" + hour) : hour) + ":" + (minute = minute < 10 ? ("0" + minute) : minute) + ":" + ( second = second < 10 ? ("0" + second) : second); } var output; var websocket; function init() { output = document.getElementById("output"); testWebSocket(); } function addsocket() { var wsaddr = $("#wsaddr").val(); if (wsaddr == '') { alert("请填写websocket的地址"); return false; } StartWebSocket(wsaddr); } function closesocket() { websocket.close(); } function StartWebSocket(wsUri) { websocket = new WebSocket(wsUri); websocket.onopen = function(evt) { onOpen(evt) }; websocket.onclose = function(evt) { onClose(evt) }; websocket.onmessage = function(evt) { onMessage(evt) }; websocket.onerror = function(evt) { onError(evt) }; } function onOpen(evt) { writeToScreen("<span style='color:red'>连接成功,现在你可以发送信息啦!!!</span>"); } function onClose(evt) { writeToScreen("<span style='color:red'>websocket连接已断开!!!</span>"); websocket.close(); } function onMessage(evt) { writeToScreen('<span style="color:blue">服务端回应 ' + formatDate(new Date()) + '</span><br/><span class="bubble">' + evt.data + '</span>'); } function onError(evt) { writeToScreen('<span style="color: red;">发生错误:</span> ' + evt.data); } function doSend() { var message = $("#message").val(); if (message == '') { alert("请先填写发送信息"); $("#message").focus(); return false; } if (typeof websocket === "undefined") { alert("websocket还没有连接,或者连接失败,请检测"); return false; } if (websocket.readyState == 3) { alert("websocket已经关闭,请重新连接"); return false; } console.log(websocket); $("#message").val(''); writeToScreen('<span style="color:green">你发送的信息 ' + formatDate(new Date()) + '</span><br/>' + message); websocket.send(message); } function writeToScreen(message) { var div = "<div class='newmessage'>" + message + "</div>"; var d = $("#output"); var d = d[0]; var doScroll = d.scrollTop == d.scrollHeight - d.clientHeight; $("#output").append(div); if (doScroll) { d.scrollTop = d.scrollHeight - d.clientHeight; } } function en(event) { var evt = evt ? evt : (window.event ? window.event : null); if (evt.keyCode == 13) { doSend() } } </script> </html>
首先要建立通信:
var websocket = new WebSocket(wsUri); //wsUri通信地址
常用命令:
websocket.onopen = function() //连接的回调
websocket.onclose = function() //关闭的回调
websocket.onmessage = function() //服务器的响应回调
websocket.onError= function() //发生错误的回调
websocket.send(message); //发送信息
-
在线websocket测试-在线工具.zip
2021-01-04 16:50:08在线websocket测试-在线工具.zip -
websocket本地调试
2017-09-25 00:27:54由于公司要做网络升级,使用的是裸机环境下的LWIP协议,之前传送测试数据有使用websocket协议。所以考虑通过websocket协议把固件从电脑传入ATMEL的DDR中,由于之前的协议是别人做的,所以利用周末来熟悉了一下... -
使用vscode搭建本地的websocket
2021-08-08 03:46:00首先在服务器方面,网上都有不同的对websocket支持的服务器:以上内容摘自:菜鸟教程,大家可以根据自己的喜好决定安装配置哪个服务器环境。这里我安装的是nodejs环境,安装教程:菜鸟教程下面开始进入正题。打开... -
nodejs-websocket-:nodejs+websocket监听本地文件目录变化
2021-05-09 20:46:17nodejs-websocket-nodejs+websocket监听本地文件目录变化下载好文件之后运行 npm install 或者 cnpm install首先在本地创建data文件夹,在app.js 中,我们可以修改baseurl来修改监听的文件目录。运行: node app.js -
关于本地websocket接收不了信息的解决方案
2020-10-15 15:40:49因为本人在做测试的原因,所以目前来讲是由本地模拟websocket服务器发送信息,代码如下: a = [['{"type":"connected"}', 0.02992081642150879], [ '{"name": "jinku00", "_create_time": "1597808952003668224", ... -
javafx-websocket-test:从 JavaFX 客户端使用 WebSocket 的示例项目
2021-07-09 10:01:37由于这是一个自包含的演示应用程序,当应用程序启动时会启动本地 WebSocket 服务器,并在应用程序停止时关闭本地服务器。 实施说明 Websocket 通信发生在异步执行的 JavaFX。 WebSocket 端点定义为带注释的端点,... -
websocket客户端测试工具
2019-11-29 10:55:26自己用c++写的websocket客户端测试工具(服务端和压力测试工具还没写),主要用来测试websocket服务端程序 -
WebSocket使用
2021-03-29 21:17:49是什么 ... 优势 全双工,服务端和客户端可以互通消息。...相对于各种论询,不仅省掉多次握手消耗,节省...使用方式(ps: 我使用的是本地nginx,自己生成的证书,密钥) 技术方案:nodejs + nginx + 微信小程序 hosts -
基于微信小程序和C#,WPF的微信拍照+websocket传输本地+图像处理.rar
2020-03-21 22:37:28自己写的基于微信小程序的手机端拍照并通过websocket协议上传至PC同时根据上传的图片做一个简单的工件缺陷的标注处理,写的非常简单,没有什么算法之类的,只是对自己学习图片传输及处理的一个记录,同时也是对自己... -
websocket 是怎么连接的
2020-12-20 21:55:21最近项目新增了一个 websocket 服务,用 nginx 做了一个简单的端口转发,然后调用的时候发现报错:error: Unexpected server response: 426解决方式也很简单,根据第一篇文章的说明,只要增加转发响应头的配置:... -
websocket_demo:websocket示例,可发送接收json数据
2021-05-19 06:38:04Websocket示例作者:卞荣成作者博客:作者网站:本项目采用“保持署名—非商用”创意共享4.0许可证。只要保持原作者署名和非商用,您可以自由地阅读、分享、修改。详细的法律条文请参见网站。用法1、在cmd中运行命令... -
WebSocket
2019-05-31 09:29:13测试websocket的工具 http://coolaf.com/tool/chattest -
websocket本地测试通过,但是生产环境下一直连接不上
2020-12-20 21:55:22使用swoole来做websocket,开发环境测试通过,测试细节是:后端:swoole监听0.0.0.0,端口9503.html页面使用:ws//192.168.1.101:9503能够连接,ws//127.0.0.1:9503能够连接。开发环境遇到问题,测试细节是:后端:... -
php本地如何开启websocket遇到的坑
2021-05-21 17:10:05> 同样搜索cmd->输入:php d:\phpstudy\www\websocket\websocket\index.php 看你的项目部署在哪路径会不一致。 然后执行后,成功是下面这个样子的。【**如果没有成功,则说明上一步骤没有成功**】 ![在这里插入图片... -
obs-websocket:通过 WebSockets 远程控制 OBS Studio
2021-08-04 11:04:22obs-websocket OBS Studio 的 WebSockets API...可能的用例从同一本地网络上的手机或平板电脑远程控制 OBS 根据当前场景更改流叠加/图形使用第三方程序自动切换场景(例如:自动驾驶仪、脚踏板等)对于开发者服务器是一 -
WebSocket 学习
2022-01-10 13:30:47项目地址4. 配置4.1 Maven4.2 WebSocketConfig5. Java 代码5.1 WebSocketController.java5.2 WebSocketServer.java6. 本地socket测试 1. 简介 WebSocket:是一种网络传输协议,可在单个TCP连接上进行全双工通信,... -
wireshark 抓本地回环包 本地websocket包
2019-12-25 15:06:43wireshark 抓本地回环包抓不到。安装一个插件就可以了 Npcap 我的安装过程 1. 安装Npcap 官网 https://nmap.org/download.html 安装的时候 记得勾选legacy loopback support for 这个选项 2. 安装... -
websocket本地正常,部署到服务器连不上
2022-02-14 10:42:24线上连接错误 解决方法: 1.开放服务器端口 2.用IP地址加端口连接 websocket = new WebSocket(`ws://119.23.41.159:9985/api/bigdata`) -
vue本地调试websocket报错
2020-08-13 09:43:04vue-cli项目使用proxy跨域访问websocket在一个项目中可以正常访问, 在另一个项目一旦访问websocket就会报以下错误 ...另外,代码打包放到服务器上可以正常运行,本地就报错,node_module's什么的也都重新安装过了 -
使用HTML5 websocket检测本地设备(Detect local devices using HTML5 websocket)
2021-06-12 13:28:57使用HTML5 websocket检测本地设备(Detect local devices using HTML5 websocket)我正在开发一个使用HTML5 WebSockets连接iOS应用程序的项目。 我需要在网页内显示附近(在...有没有办法从网站上检测本地IP地址(使用J... -
websocket-cluster:这是一个针对WebSocket集群服务器的Spring Cloud项目。
2021-03-29 19:07:58实战Spring Cloud的WebSocket体现此项目是一个...技术栈Docker(开启API访问) 雷迪斯兔子MQ 纳科斯本地开发为创建一个专用网络: docker network create compose-network本地构建,并使用docker compose简单编排部署