koa使用ws,scoker.io建立websocket连接,断开重连

1.使用ws建立socket连接,ws兼容性比socket.io要好一些

koa.js 

const Koa = require('koa'); // 引入 Koa 框架
const http = require('http'); // 引入 Node.js 的 http 模块
const { WebSocketServer } = require('ws'); // 引入 ws 模块中的 WebSocketServer
const cors = require('@koa/cors');const app = new Koa(); // 创建一个 Koa 应用实例
app.use(cors());// 创建一个 HTTP 服务器实例,并将 Koa 应用作为回调传递
const server = http.createServer(app.callback());// 创建一个 WebSocket 服务器实例,并将 HTTP 服务器作为参数传递
const wss = new WebSocketServer({ server });// 当有新的 WebSocket 连接时触发
wss.on('connection', function connection(ws) {// 处理 WebSocket 错误事件ws.on('error', console.error);// 处理收到消息事件ws.on('message', function message(data) {console.log('received: %s', data); // 打印收到的消息});// 发送初始消息给客户端ws.send('something');
});// 启动 HTTP 服务器并监听端口 8080
server.listen(8080, () => {console.log('Server is running at http://127.0.0.1:8080');
});

index.html 

<!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.0"><title>Document</title>
</head><body><div id="app"><button id="btn">send</button></div>
</body>
<script>function createConnection() {// 创建一个 WebSocket 实例,连接到服务器const socket = new WebSocket('ws://127.0.0.1:8080');// 处理收到的消息事件socket.onmessage = function (event) {console.log('Received message from server:', event.data);};// 处理连接关闭事件socket.onclose = function (event) {console.log('WebSocket is closed now.');setTimeout(() => {scoket = createConnection();}, 2000);};// 处理错误事件socket.onerror = function (error) {console.error('WebSocket error observed:', error);socket.close();};// 处理连接打开事件socket.onopen = function (event) {console.log('WebSocket is open now.');};return socket;}let socket = createConnection();// 获取按钮并添加点击事件处理程序document.getElementById('btn').addEventListener('click', function () {if (socket.readyState !== WebSocket.OPEN) {socket = createConnection();}socket.send('Hello, Server!');console.log('Message sent to server: Hello, Server!');});
</script></html>

2、socket.io

app.js

const koa = require('koa');
const http = require('http');
const SocketIO = require('socket.io');
const cors = require('@koa/cors');
const Router = require('@koa/router');
const fs = require('fs');
const router = new Router();const app = new koa();
app.use(cors());router.get('/index', (ctx) => {ctx.body = fs.readFileSync('./index2.html', 'utf-8');
});
app.use(router.routes());const server = http.createServer(app.callback());
const io = SocketIO(server);io.on('connect', client => {client.on('event', data => {console.log(data);});client.on('disconnect', () => {console.log('disconnect');});
});server.listen(8080, () => {console.log('127.0.0.1:8080');
});

index.html

<!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.0"><title>Document</title>
</head><body><div id="app"><button id="send">send</button></div>
</body>
<script src="https://cdn.socket.io/4.7.5/socket.io.min.js" integrity="sha384-2huaZvOR9iDzHqslqwpR87isEmrfxqyWOF7hr7BY6KG0+hVKLoEXMPUJw3ynWuhO" crossorigin="anonymous"></script>
<script >// console.log('connect=',io.connect);let socket = io.connect('ws://127.0.0.1:8080');socket.on('connect', () => {console.log('connect');});socket.on('disconnect', () => {console.log('disconnect');});socket.on('event', (data) => {cosole.log(data);});document.getElementById('send').addEventListener('click',()=>{console.log(socket.connected,)socket.emit('event','hello !!!!!!!!');});
</script></html>

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/15157.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

SpringBoot——整合Thymeleaf模板

目录 模板引擎 新建一个SpringBoot项目 pom.xml application.properties Book BookController bookList.html ​编辑 项目总结 模板引擎 模板引擎是为了用户界面与业务数据分离而产生的&#xff0c;可以生成特定格式的页面在Java中&#xff0c;主要的模板引擎有JSP&…

【MySQL精通之路】SQL优化(1)-查询优化(1)-WHERE子句

主博客&#xff1a; 【MySQL精通之路】SQL优化(1)-查询优化-CSDN博客 下一篇&#xff1a; 【MySQL精通之路】SQL优化(1)-查询优化(2)-范围查询优化-CSDN博客 本节讨论可用于处理WHERE子句的优化。 这些示例使用SELECT语句&#xff0c;但DELETE和UPDATE语句中的WHERE子句也适…

Python 闭包的高级用法详解

所谓闭包&#xff0c;就是指内函数使用了外函数的局部变量&#xff0c;并且外函数把内函数返回出来的过程&#xff0c;这个内函数称之为闭包函数。可以理解为是函数式编程中的封装。 内部函数可以使用外部函数定义的属性&#xff1a;外部函数调用后&#xff0c;返回内部函数的地…

Linux_web控制台-cockpit

1、安装cockpit [rootlocalhost ~]# dnf install cockpit -y 2、启动cockpit服务并查运行状态 [rootlocalhost ~]# systemctl start cockpit [rootlocalhost ~]# systemctl status cockpit 2、设置开机启动 [rootlocalhost ~]# vim /usr/lib/systemd/system/cockpit.servi…

局域网桌面监控软件哪个好用?良心推荐

如何有效地监控和管理内部员工的计算机使用行为&#xff0c;防范潜在的安全风险&#xff0c;提高工作效率&#xff0c;是众多企业管理者关注的焦点。 而一款优秀的局域网桌面监控软件无疑能为企业的IT治理提供有力支撑。 小编在此给大家推荐一款好用的局域网桌面监控软件——域…

5. C++网络编程-UDP协议的实现

UDP是无连接的。 UDP Server网络编程基本步骤 创建socket&#xff0c;指定使用UDP协议将socket与地址和端口绑定使用recv/send接收/发送数据 由于UDP是无连接的&#xff0c;直接侦听就行使用close关闭连接 这个UDP接收数据的时候用的API是recvfrom,发送数据是sendto

Python——获取DataFrame的表头列表

# 获取表头列表 header_list df_data.columns.tolist()

MCS-51伪指令

上篇我们讲了汇编指令格式&#xff0c;寻址方式和指令系统分类&#xff0c;这篇我们讲一下单片机伪指令。 伪指令是汇编程序中用于指示汇编程序如何对源程序进行汇编的指令。伪指令不同于指令&#xff0c;在汇编时并不翻译成机器代码&#xff0c;只是会汇编过程进行相应的控制…

已有yarn集群部署spark

已有yarn集群的情况下&#xff0c;部署spark只需要部署客户端。 一、前提条件 已部署yarn集群&#xff0c;部署方式参考&#xff1a;https://blog.csdn.net/weixin_39750084/article/details/136750613?spm1001.2014.3001.5502&#xff0c;我部署的hadoop版本是3.3.6已安装j…

Android Compose 九:常用组件列表 简单使用

遇事不决 先看官方文档 列表和网格 如果不需要任何滚动&#xff0c;通过Column 或 Row可以使用verticalScroll() 使Column滚动 Column(modifier Modifier.verticalScroll(rememberScrollState())) {for (i in 0..50){Text(text "条目>>${i}")}}显示大量列表…

13、设计模式之观察者模式

观察者模式 观察者模式是一种行为型设计模式&#xff0c;它定义了一种一对多的依赖关系&#xff0c;当一个对象的状态发生改变时&#xff0c;其所有依赖者都会收到通知并自动更新。 当对象间存在一对多关系时&#xff0c;则使用观察者模式&#xff08;Observer Pattern&#x…

从0开始linux(3)——如何读写文件

欢迎来到博主的专栏——从0开始linux 博主ID&#xff1a;代码小豪 文章目录 创建普通文件用文本编辑器nano写入文件如何读取文件cat命令less命令head和tail 我们前面已经了解和如何操作文件&#xff0c;但是目前认识的文件类型分为两类&#xff0c;一类是目录文件、另一类是普通…

【C#上位机应用开发实战】—— 通信模块的基础与实践

&#x1f680; 引言 在工业自动化、设备监控、物联网&#xff08;IoT&#xff09;等领域&#xff0c;上位机软件扮演着至关重要的角色。作为连接人与设备的桥梁&#xff0c;上位机软件不仅需要提供友好的用户界面&#xff0c;更需要具备高效、稳定的通信能力。今天&#xff0c…

ASP+ACCESS教师档案管理系统

3.1 系统功能模块图 3.2 E&#xff0d;R模型图 3.3 系统使用流程图 3.4 各个模块功能简介&#xff1a; 本系统分为五个功能模块&#xff0c;它们分别是教师信息录入模块、教师信息修改模块、教师信息查询模块、教师信息打印模块。 下面分别介绍各个模块的功能用途&#x…

第 398 场 LeetCode 周赛题解

A 特殊数组 I 模拟&#xff1a;遍历数组判断是否是一个特殊数组 class Solution { public:bool isArraySpecial(vector<int>& nums) {int r 0;while (r 1 < nums.size() && nums[r 1] % 2 ! nums[r] % 2)r;return r nums.size() - 1;} };B 特殊数组 I…

计网(部分在session学习章)

TCP/UDP TCP:面向连接,先三次握手建立连接,可靠传输。 UDP:无连接,不可靠,传递的快。 TCP可靠传输 1.分块编号传输; 2.校验和,校验首部和数据的检验和,检测数据在传输中的变化; 3.丢弃重复数据; 4.流量控制,TCP 利⽤滑动窗⼝实现流量控制。TCP的拥塞控制采⽤…

如何解决VSCode Git插件差异查看器 无法读取文件 Error: 无法解析不存在的文件 的问题

问题描述 问题&#xff1a;在使用VSCode的Git插件中的差异查看器时&#xff0c;有时会出现如下报错信息&#xff1a; 无法读取文件 git:/d:/Desktop//UIInput.js?{"path":"d:\\Desktop\\UIInput.js","ref":"~"} (Error: 无法解析不…

如何用正则表达式匹配中文和英文

在文本处理和自然语言处理的领域&#xff0c;准确地分割和匹配单词是至关重要的任务之一。对于处理包含多种语言&#xff08;如中英文混合&#xff09;的文本&#xff0c;常见的分词方法可能不够准确&#xff0c;特别是对汉字和英文单词的处理。本文将介绍如何使用正则表达式&q…

基于Matlab卷积神经网络人脸识别

欢迎大家点赞、收藏、关注、评论啦 &#xff0c;由于篇幅有限&#xff0c;只展示了部分核心代码。 文章目录 一项目简介 二、功能三、系统四. 总结 一项目简介 一、项目背景与意义 人脸识别作为计算机视觉领域的关键技术之一&#xff0c;具有广泛的应用前景&#xff0c;如安全…

Add object from object library 从对象库中添加内置器件

Add object from object library 从对象库中添加内置器件 正文正文 对于 Lumerical,有些时候我们在使用中,可能需要从 Object library 中添加器件,通常我们的做法是手动添加。如下图所示,我们添加一个 Directional Coupler 到我们的工程文件中: 但是这种操作方式不够智能…