当前位置： 首页 > news >正文

如何通过websoket实现即时通讯+断线重连?

news 2025/9/16 11:56:57

本篇博客只是一个demo，具体应用还要结合项目实际情况，以下是目录结构：

1.首先通过express搭建一个本地服务器

npm install express

2.在serve.js中自定义测试数据 

const express = require('express');
const app = express();
const http = require('http');
const server = http.createServer(app);app.get('/', (req, res) => {res.send('服务器搭好了');
});app.get('/list', (req, res) => {res.send([{ id: 1, name: 'Tom', age: 18 },{ id: 2, name: 'Jerry', age: 12 },{ id: 3, name: 'houseHolder', age: 30 }]);
});// 0.0.0.0 表示监听当前机器所有ip 包含本机ip和外网ip
server.listen(2000, '0.0.0.0', () => {console.log('127.0.0.1:2000');
});

3.运行服务器

node serve.js

注：如何查看所有ip ？（本地+外网ip）

npm install http-server

终端直接输入：http-server

4.测试服务器是否开启

发送请求，可以拿到返回的数据，服务器开启成功

 5.通过 socket.io-client 实现客户端代码

npm install socket.io-client

6.创建websocket服务器

const express = require('express');
const app = express();
const http = require('http');
const server = http.createServer(app);+const { Server } = require("socket.io");
+// 创建了一个websocket服务器,并解决了跨域的问题
+const io = new Server(server, { cors: true });+// 监听与客户端的连接事件
+io.on('connection', socket => {console.log('服务端连接成功');// 监听浏览器传过来的事件socket.on('handle', (e) => {console.log(e, 'app传过来的数据');socket.emit('message', e);})
})app.get('/', (req, res) => {res.send('服务器搭好了');
});app.get('/list', (req, res) => {res.send([{ id: 1, name: 'Tom', age: 18 },{ id: 2, name: 'Jerry', age: 12 },{ id: 3, name: 'houseHolder', age: 30 }]);
});// npm install -g http-server查看所有ip  0.0.0.0 表示监听当前机器所有ip 包含本机ip和外网ip
server.listen(2000, '0.0.0.0', () => {console.log('127.0.0.1:2000');
});

 7.在app/index.js中导入socket.io的cdn线上包，并连接本地服务器

<!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><script src="https://cdn.socket.io/4.4.0/socket.io.min.js"></script>
</head><body><input type="text" id="ipt" placeholder="请输入内容"><button id="btn">按钮</button><script>let socket = io('ws://192.168.18.162:2000')// 监听浏览器、服务器是否建立连接socket.on('connect', () => {console.log('浏览器和服务器连接上了');})socket.on('message', (e) => {console.log(e, '服务器传过来的值');})const btn = document.querySelector('#btn')const ipt = document.querySelector('#ipt')btn.addEventListener('click', () => {console.log(ipt.value, 'input框信息');// 向服务器传递表单数据socket.emit('handle', ipt.value);})</script>
</body></html>

8.连接成功客户端和服务器都可以获取input框的值

 

 

 9.优化：解决断线重连问题

思路：在监听客户端监听是否和服务端连接成功的函数中，监听断线连接函数，如果连接失败设置定时器每3s重新建立连接

 

<!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><script src="https://cdn.socket.io/4.4.0/socket.io.min.js"></script>
</head><body><input type="text" id="ipt" placeholder="请输入内容"><button id="btn">按钮</button><script>let socket = io('ws://192.168.18.162:2000')// 监听浏览器、服务器是否建立连接socket.on('connect', () => {console.log('浏览器和服务器连接上了');// 解决:断线重连console.dir(socket)socket.on('disconnect', () => {let intervalSocket = nullintervalSocket = setInterval(() => {console.log("disconnect:" + socket.disconnected)if (socket.disconnected) {socket = io('ws://192.168.18.162:2000')} else {clearInterval(intervalSocket)}}, 3000)})})socket.on('message', (e) => {console.log(e, '服务器传过来的值');})const btn = document.querySelector('#btn')const ipt = document.querySelector('#ipt')btn.addEventListener('click', () => {console.log(ipt.value, 'input框信息');// 向服务器传递表单数据socket.emit('handle', ipt.value);})</script>
</body></html>

相关文章：

如何通过websoket实现即时通讯+断线重连?

本篇博客只是一个demo&#xff0c;具体应用还要结合项目实际情况&#xff0c;以下是目录结构&#xff1a; 1.首先通过express搭建一个本地服务器 npm install express 2.在serve.js中自定义测试数据 const express require(express); const app express(); const http req…...

编程日记 2023/4/25 0:34:58

爽，我终于掌握了selenium图片滑块验证码

因为种种原因没能实现愿景的目标&#xff0c;在这里记录一下中间结果&#xff0c;也算是一个收场吧。这篇文章主要是用selenium解决滑块验证码的个别案列。 思路&#xff1a; 用selenium打开浏览器指定网站 将残缺块图片和背景图片下载到本地 对比两张图片的相似地方&#x…...

编程日记 2023/4/25 0:34:53

二、SpringMVC注解式开发

1. RequestMapping注解 此注解就是来映射服务器访问的路径 可加在方法上,是为此方法注册一个可以访问的名称(路径) 可以加在类上,相当于是包名(虚拟路径),区分不同类中相同的action的名称 可区分get请求和post请求 package com.powernode.controller;import org.springframe…...

编程日记 2023/4/25 0:34:47

Java容器面试知识点总结

容器 java容器有哪些&#xff1f; String&#xff0c;数组以及Java.util 下面的集合类 List&#xff1a;存放有序&#xff0c;列表存储&#xff0c;元素可重复 ArrayList LinkedList Vector Set:无序&#xff0c;元素不可重复 HashSet TreeSet Map: 无序&#xff0c;元素可重复…...

编程日记 2023/4/25 0:34:38

增长：2023 IT运维发展趋势前瞻

根据IDC和智研咨询数据等平台公开数据显示&#xff0c;从2018年至2022年&#xff0c;全球ITOM行业市场规模以8.58%的年均复合增长率高速增长。其中&#xff0c;中国ITOM市场在2020-2023年的年复合增长率为10.7%&#xff0c;到2023年市场规模将达到165.7亿元。012022中国IT运维解…...

编程日记 2023/4/25 0:34:29

自己定义typescript的类型声明文件xx.d.ts

****内容预警***菜鸟新手内容&#xff0c;大佬请绕道&#xff0c;不对的请指出我们在使用typescript的使用&#xff0c;如果安装一个包没有相应的类型声明文件&#xff0c;ts的类型检查就会报错&#xff0c;所以我们经常会安装npm包对应的types类型声明包&#xff0c;比如uuid …...

编程日记 2023/4/25 0:34:22

数据分析方法及名词解释总结_(面试2)

1、用户画像 1.1、什么是用户画像&#xff1f;如何构建用户画像&#xff1f; - 知乎提到用户画像&#xff0c; 很多人都可能存在的错误认知&#xff0c;即把用户画像简单理解成用户各种特征&#xff0c;比如说姓名、性别、…https://www.zhihu.com/question/372802348/answer/2…...

编程日记 2023/4/25 0:34:15

【FLY】Java知识点总结

目录认识Java概念图名词解释历史版本基础知识编程规范关键字数据类型运算符数组Stringequals与流程控制引用数据结构常用数据结构HashMapLinkedHashMapWeakHashMapIdentityHashMapEnumMapTreeMapCopyOnWriteArrayList面向对象类反射注解IO异常线程EffectiveJava8JVM运行时数据区…...

编程日记 2023/4/25 0:34:09

SpringMVC-0307

三、RequestMapping注解1、RequestMapping注解的功能从注解名称上我们可以看到&#xff0c;RequestMapping注解的作用就是将请求和处理请求的控制器方法关联起来&#xff0c;建立映射关系。SpringMVC 接收到指定的请求&#xff0c;就会来找到在映射关系中对应的控制器方法来处理…...

编程日记 2023/4/25 0:34:04

华为OD机试 - 九宫格按键输入（C 语言解题）【独家】

最近更新的博客 华为od 2023 | 什么是华为od，od 薪资待遇，od机试题清单华为OD机试真题大全，用 Python 解华为机试题 | 机试宝典【华为OD机试】全流程解析+经验分享,题型分享,防作弊指南）华为od机试，独家整理 已参加机试人员的实战技巧文章目录 使用说明本期题目：九宫格按…...

编程日记 2023/4/25 0:33:56

Oracle 11g RAC群集部署

Oracle 11g RAC群集部署 1.环境介绍&#xff1a; 操作系统&#xff1a;Oracle Enterprise Linux 6.5 Oracle数据库&#xff1a;Oracle 11.2.0.4 集群软件&#xff1a;Oracle Grid Infrastructure 11.2.0.4 2.所需介质&#xff1a; p13390677_112040_Linux-x86-64_1of7 p133…...

编程日记 2023/4/25 7:00:08

【C++、C++11】列表初始化、右值引用

文章目录&#x1f4d6; 前言1. 统一的列表初始化1.1 { } 花括号初始化&#xff1a;1.2 std::initializer_list&#xff1a;2. 右值引用2.1 什么是左值和右值&#xff1a;2.2 右值的分类&#xff1a;2.3 左值引用和右值引用的比较2.3 右值的使用场景&#xff1a;2.4 新的类功能&…...

编程日记 2023/4/25 7:00:00

CMU15-445 Project.3总结

在线测试 Project #3 - Query Execution 以下是Project #3的网址&#xff0c;2022FALL的Project #3是实现一个查询执行&#xff0c;实现一系列算子&#xff0c;用于实现数据库内的SQL计算。项目中的 Query Execution 主要分为三个任务&#xff1a; Access Method Executors…...

编程日记 2023/4/25 6:59:49

002+limou+HTML——（2）HTML文档

000、前言 一般来说一个静态网页拥有四种元素&#xff1a;文字、图片、超链接、音频和视频&#xff08;注意&#xff0c;即使在web网页中植入Javascript语言&#xff0c;也不一定是动态网页&#xff0c;真正的动态网页判断标准&#xff1a;是否和服务器产生交互&#xff09; …...

编程日记 2023/4/25 6:59:41

红外传感器模块与 Arduino 连接

红外传感器模块与 Arduino 连接 原文地址 Arduino 红外传感器接口 红外**接近传感器或红外传感器它发射红外光以感知周围环境&#xff0c;并可用于检测物体的运动。由于这是一个无源传感器&#xff0c;它只能测量红外辐射。如果您曾经尝试过设计避障机器人或任何其他基于接近…...

编程日记 2023/4/25 6:59:31

NC xml配置文件不能生产java文件

在NC开发过程中&#xff0c;新增、或修改了xml文件&#xff0c;在开发工具eclipse中生成或重新生成Java文件&#xff0c;发现生成不了相对应的Java文件。如下图&#xff0c;选中xml文件后&#xff0c;右键点击SpringXml to Java 这种情况其实一般都是xml配置文件有问题&#…...

编程日记 2023/4/25 6:59:16

华为OD机试 - 五键键盘（C 语言解题）【独家】

最近更新的博客 华为od 2023 | 什么是华为od，od 薪资待遇，od机试题清单华为OD机试真题大全，用 Python 解华为机试题 | 机试宝典【华为OD机试】全流程解析+经验分享,题型分享,防作弊指南）华为od机试，独家整理 已参加机试人员的实战技巧文章目录 使用说明本期题目：五键键盘…...

编程日记 2023/4/25 6:59:04

Kubernetes Service简介

Service 之前我们了解了Pod的基本用法&#xff0c;我们也了解到Pod的生命是有限的&#xff0c;死亡过后不会复活了。我们后面学习到的RC和Deployment可以用来动态的创建和销毁Pod。尽管每个Pod都有自己的IP地址&#xff0c;但是如果Pod重新启动了的话那么他的IP很有可能也就变…...

编程日记 2023/4/25 6:59:00

【c++类与对象 】

目录&#xff1a;前言一、基础引入1.类的定义2.类的权限3.类的封装4.类的实例化5.计算类对象的大小结构体内存对齐规则空类的大小二、this指针this引入this指针的特性经典例题三、类的六个默认成员函数1、构造 && 析构构造函数析构函数2、拷贝 && 赋值拷贝构造…...

编程日记 2023/4/25 6:58:46

【C++】内联函数auto范围for循环nullptr

&#x1f3d6;️作者&#xff1a;malloc不出对象 ⛺专栏&#xff1a;C的学习之路 &#x1f466;个人简介&#xff1a;一名双非本科院校大二在读的科班编程菜鸟&#xff0c;努力编程只为赶上各位大佬的步伐&#x1f648;&#x1f648; 目录前言一、内联函数1.1 内联函数概念1.2…...

编程日记 2023/4/25 6:58:36

利用ngx_stream_return_module构建简易 TCP/UDP 响应网关

一、模块概述 ngx_stream_return_module 提供了一个极简的指令&#xff1a; return <value>;在收到客户端连接后&#xff0c;立即将 <value> 写回并关闭连接。<value> 支持内嵌文本和内置变量&#xff08;如 $time_iso8601、$remote_addr 等&#xff09;&a…...

编程新知 2025/8/11 21:08:14

MongoDB学习和应用(高效的非关系型数据库)

一丶 MongoDB简介 对于社交类软件的功能&#xff0c;我们需要对它的功能特点进行分析&#xff1a; 数据量会随着用户数增大而增大读多写少价值较低非好友看不到其动态信息地理位置的查询… 针对以上特点进行分析各大存储工具&#xff1a; mysql&#xff1a;关系型数据库&am…...

编程新知 2025/9/13 17:45:27

大型活动交通拥堵治理的视觉算法应用

大型活动下智慧交通的视觉分析应用 一、背景与挑战 大型活动&#xff08;如演唱会、马拉松赛事、高考中考等&#xff09;期间&#xff0c;城市交通面临瞬时人流车流激增、传统摄像头模糊、交通拥堵识别滞后等问题。以演唱会为例&#xff0c;暖城商圈曾因观众集中离场导致周边…...

编程新知 2025/9/6 15:45:27

STM32+rt-thread判断是否联网

一、根据NETDEV_FLAG_INTERNET_UP位判断 static bool is_conncected(void) {struct netdev *dev RT_NULL;dev netdev_get_first_by_flags(NETDEV_FLAG_INTERNET_UP);if (dev RT_NULL){printf("wait netdev internet up...");return false;}else{printf("loc…...

编程新知 2025/7/30 23:37:23

前端导出带有合并单元格的列表

// 导出async function exportExcel(fileName "共识调整.xlsx") {// 所有数据const exportData await getAllMainData();// 表头内容let fitstTitleList [];const secondTitleList [];allColumns.value.forEach(column > {if (!column.children) {fitstTitleL…...

编程新知 2025/9/9 15:02:38

转转集团旗下首家二手多品类循环仓店“超级转转”开业

6月9日&#xff0c;国内领先的循环经济企业转转集团旗下首家二手多品类循环仓店“超级转转”正式开业。 转转集团创始人兼CEO黄炜、转转循环时尚发起人朱珠、转转集团COO兼红布林CEO胡伟琨、王府井集团副总裁祝捷等出席了开业剪彩仪式。 据「TMT星球」了解&#xff0c;“超级…...

编程新知 2025/8/22 5:05:39

MODBUS TCP转CANopen 技术赋能高效协同作业

在现代工业自动化领域&#xff0c;MODBUS TCP和CANopen两种通讯协议因其稳定性和高效性被广泛应用于各种设备和系统中。而随着科技的不断进步&#xff0c;这两种通讯协议也正在被逐步融合&#xff0c;形成了一种新型的通讯方式——开疆智能MODBUS TCP转CANopen网关KJ-TCPC-CANP…...

编程新知 2025/9/3 19:32:54

从零实现STL哈希容器：unordered_map/unordered_set封装详解

本篇文章是对C学习的STL哈希容器自主实现部分的学习分享 希望也能为你带来些帮助~ 那咱们废话不多说&#xff0c;直接开始吧&#xff01; 一、源码结构分析 1. SGISTL30实现剖析 // hash_set核心结构 template <class Value, class HashFcn, ...> class hash_set {ty…...

编程新知 2025/8/25 21:03:32

前端开发面试题总结-JavaScript篇(一)

文章目录 JavaScript高频问答一、作用域与闭包1.什么是闭包&#xff08;Closure&#xff09;&#xff1f;闭包有什么应用场景和潜在问题&#xff1f;2.解释 JavaScript 的作用域链&#xff08;Scope Chain&#xff09; 二、原型与继承3.原型链是什么&#xff1f;如何实现继承&a…...

编程新知 2025/8/26 17:36:58

Web 架构之 CDN 加速原理与落地实践

文章目录 一、思维导图二、正文内容&#xff08;一&#xff09;CDN 基础概念1. 定义2. 组成部分 &#xff08;二&#xff09;CDN 加速原理1. 请求路由2. 内容缓存3. 内容更新 &#xff08;三&#xff09;CDN 落地实践1. 选择 CDN 服务商2. 配置 CDN3. 集成到 Web 架构 &#xf…...

编程新知 2025/9/13 16:17:01