koa使用ws,scoket.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/diannao/16416.shtml

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

相关文章

QT之常用控件

一个图形化界面当然需要有各种各样的控件&#xff0c;QT也不例外&#xff0c;在QT designer中就有提供各种各样的控件&#xff0c;用以开发图形化界面。 而想使用好一个QT控件&#xff0c;就需要了解这些控件。 QWidget 在QT中&#xff0c;所有控件都继承自 QWidget 类&…

推荐10款优秀的组件库(一)

1.Ant Desgin UI 网址&#xff1a; https://ant-design-mobile.antgroup.com/zh Ant Design - 一套企业级 UI 设计语言和 React 组件库 "Ant Design Mobile"是一个在线的移动端Web体验平台&#xff0c;让你探索移动端Web的体验极限。 添加图片注释&#xff0c;不…

622.设计循环队列

typedef struct {int* a;int head;int tail;int k; } MyCircularQueue;bool myCircularQueueIsEmpty(MyCircularQueue* obj); bool myCircularQueueIsFull(MyCircularQueue* obj);//初始化 MyCircularQueue* myCircularQueueCreate(int k) {MyCircularQueue* obj(MyCircularQue…

CSS3开发实践难点

目录 响应式设计与流体布局动画与交互性能优化CSS预处理器与后处理器CSS-in-JSCSS高级技巧视觉与滤镜效果工具与工作流实验性响应式设计与流体布局 媒体查询(M

.cc和.cpp文件的区别

在C编程中&#xff0c;文件扩展名为.cpp和.cc的文件实际上没有本质的区别&#xff0c;它们都用于存储C源代码。两种扩展名都可以用于编写C程序&#xff0c;并且在大多数情况下&#xff0c;它们可以互换使用。 一般来说&#xff0c;.cpp扩展名是最常见的用于C源代码文件的标准扩…

linux内核调试技巧四:gdb调试+vmlinux

vmlinux是个elf文件&#xff0c;它的符号表中包含了所有内核符号。 注意linux中很多文件是没有后缀的&#xff0c;比如我见到的这个elf文件的文件名是“vmlinux-3.10.62”&#xff0c;没有后缀。 既然是elf文件那就可以用 点击打开链接 里面的方法直接查看符号表。 要想看得…

SW 草图偏移 先预选

因为有些不能用链全部选,可以先框选要偏移的,再点偏移命令

探索python列表处理:偶数筛选的两种方法

新书上架~&#x1f447;全国包邮奥~ python实用小工具开发教程http://pythontoolsteach.com/3 欢迎关注我&#x1f446;&#xff0c;收藏下次不迷路┗|&#xff40;O′|┛ 嗷~~ 目录 一、引言 二、不使用列表生成式的偶数筛选 1. 读取输入列表 2. 筛选偶数 三、使用列表生…

重学java 46.集合 ① Collection集合

事常与人违&#xff0c;事总在人为 —— 24.5.26 集合 知识导航 1.集合的特点以及作用 2.使用collection接口中的方法 3.使用迭代器迭代集合 4.ArrayList以及LinkedList的使用 5.使用增强for遍历集合 一、单列集合框架的介绍 1.长度可变的容器&#xff1a;集合 2.集合的特点 a.…

每日一问-如何设置VS Code 中 Markdown粘贴图片的位置

VS Code内的markdown编辑器应该算是比较好用的&#xff0c;但是有一个问题一直困扰着我&#xff0c;就是在编辑markdown文件时&#xff0c;粘贴图片的位置问题。默认情况下&#xff0c;VS Code会将粘贴的图片放在markdown文件的同级目录下&#xff0c;这样会导致markdown文件的…

OSPF多区域组网实验(华为)

思科设备参考&#xff1a;OSPF多区域组网实验&#xff08;思科&#xff09; 技术简介 OSPF多区域功能通过划分网络为多个逻辑区域来提高网络的可扩展性和管理性能。每个区域内部运行独立的SPF计算&#xff0c;而区域之间通过区域边界路由器进行路由信息交换。这种划分策略适用…

three.js中使用CameraHelper来可视化调整阴影相机的范围

1. three.js中使用CameraHelper来可视化调整阴影相机的范围 光源 const directionLight new THREE.DirectionalLight(0xffffff, 1); directionLight.position.set(100, 60, 20); directionLight.castShadow true; scene.add(directionLight);设置计算阴影的范围 direction…

Unity3D MMORPG 主城角色动画控制与消息触发详解

Unity3D是一款强大的游戏开发引擎&#xff0c;它提供了丰富的功能和工具&#xff0c;使开发者能够轻松创建出高质量的游戏。其中&#xff0c;角色动画控制和消息触发是游戏开发中非常重要的一部分&#xff0c;它们可以让游戏角色表现出更加生动和多样的动作&#xff0c;同时也能…

构建智慧科技园区的系统架构:数字化驱动未来创新

随着科技的不断进步和数字化转型的加速推进&#xff0c;智慧科技园区已成为当今城市发展的重要组成部分。在智慧科技园区建设中&#xff0c;系统架构的设计和实施至关重要&#xff0c;对于提升园区管理效率、优化资源利用、促进创新发展具有重要意义。 一、智慧科技园区系统架构…

02.并发编程基础概念

在正式学习 Java 的并发编程之前&#xff0c;我们需要熟悉和学习几个并发编程的基础概念。 1 进程和线程 1.1 进程 我们常说的是应用程序&#xff0c;也就是 app&#xff0c;由指令和数据组成。但是当我们不运行一个具体的 app 时&#xff0c;这些应用程序就是放在磁盘(也包括…

化学中的不确定性。

化学中的不确定性TOC 基于元素分析的无机化学的理论大厦应该说早已落成了&#xff0c;但是却仍然存在着一些列的难解甚至是无解问题&#xff0c;这些大多是在使用理论解释现象时遇到的困难&#xff0c;有些则是在生产实践中生产工艺和生产工序设计和优化中发现的问题。于是&…

Netty:AIO

文章目录 一、介绍二、FileChannel 一、介绍 AIO用来解决数据复制阶段的阻塞问题&#xff1a; 同步意味着&#xff0c;在进行读写操作时&#xff0c;线程需要等待结果&#xff0c;还是相当于闲置。异步 意味着&#xff0c;在进行读写操作时&#xff0c;线程不必等待结果&…

跨境电商平台自养号测评的入门指南和进阶技巧

在跨境电子商务的平台中&#xff0c;自主培养账号进行测评已演变为提高销售与评价的核心举措。伴随市场的持续拓展以及竞争的渐趋白热化&#xff0c;卖家对这一策略的依赖程度日益加深&#xff0c;以提升产品的排位与权重。此文将引领您一探自养号测评的核心技术、策略以及未来…

基于PID的单片机温度控制系统设计

基于PID的温度控制系统设计 摘要 温度是工业上最基本的参数&#xff0c;与人们的生活紧密相关&#xff0c;实时测量温度在工业生产中越来越受到重视&#xff0c;离不开温度测量所带来的好处&#xff0c;因此研究控制和测量温度具有及其重要的意义。 本设计介绍了以AT89C52单片…

JavaWeb_Web——Maven

介绍&#xff1a; Maven是Apache公司发行的&#xff0c;一个Java项目管理和构建工具 作用&#xff1a; 1.方便的依赖管理 2.统一的项目结构 3.标准的项目构建流程 模型&#xff1a; Maven通过项目对象模型(POM)和依赖管理模型(Dependency)管理依赖(jar包)&#xff0c;如果新添…