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

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

news 2025/12/31 5:11:18

本篇博客只是一个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

C++实现分布式网络通信框架RPC(3)--rpc调用端

目录 一、前言 二、UserServiceRpc_Stub 三、 CallMethod方法的重写 头文件 实现 四、rpc调用端的调用 实现 五、 google::protobuf::RpcController *controller 头文件 实现 六、总结 一、前言 在前边的文章中&#xff0c;我们已经大致实现了rpc服务端的各项功能代…...

编程新知 2025/12/29 7:14:49

大话软工笔记—需求分析概述

需求分析&#xff0c;就是要对需求调研收集到的资料信息逐个地进行拆分、研究&#xff0c;从大量的不确定“需求”中确定出哪些需求最终要转换为确定的“功能需求”。 需求分析的作用非常重要&#xff0c;后续设计的依据主要来自于需求分析的成果&#xff0c;包括: 项目的目的…...

编程新知 2025/12/23 9:42:29

Prompt Tuning、P-Tuning、Prefix Tuning的区别

一、Prompt Tuning、P-Tuning、Prefix Tuning的区别 1. Prompt Tuning（提示调优） 核心思想：固定预训练模型参数，仅学习额外的连续提示向量（通常是嵌入层的一部分）。实现方式：在输入文本前添加可训练的连续向量（软提示），模型只更新这些提示参数。优势：参数量少（仅提…...

编程新知 2025/12/30 21:34:31

DeepSeek 赋能智慧能源：微电网优化调度的智能革新路径

目录 一、智慧能源微电网优化调度概述1.1 智慧能源微电网概念1.2 优化调度的重要性1.3 目前面临的挑战 二、DeepSeek 技术探秘2.1 DeepSeek 技术原理2.2 DeepSeek 独特优势2.3 DeepSeek 在 AI 领域地位 三、DeepSeek 在微电网优化调度中的应用剖析3.1 数据处理与分析3.2 预测与…...

编程新知 2025/11/20 2:48:44

Golang 面试经典题：map 的 key 可以是什么类型？哪些不可以？

Golang 面试经典题&#xff1a;map 的 key 可以是什么类型&#xff1f;哪些不可以&#xff1f; 在 Golang 的面试中&#xff0c;map 类型的使用是一个常见的考点&#xff0c;其中对 key 类型的合法性 是一道常被提及的基础却很容易被忽视的问题。本文将带你深入理解 Golang 中…...

编程新知 2025/12/20 7:42:02

相机Camera日志实例分析之二：相机Camx【专业模式开启直方图拍照】单帧流程日志详解

【关注我&#xff0c;后续持续新增专题博文&#xff0c;谢谢&#xff01;&#xff01;&#xff01;】 上一篇我们讲了&#xff1a; 这一篇我们开始讲&#xff1a; 目录 一、场景操作步骤 二、日志基础关键字分级如下 三、场景日志如下&#xff1a; 一、场景操作步骤 操作步…...

编程新知 2025/12/25 15:18:59

Java如何权衡是使用无序的数组还是有序的数组

在 Java 中，选择有序数组还是无序数组取决于具体场景的性能需求与操作特点。以下是关键权衡因素及决策指南： ⚖️ 核心权衡维度 维度有序数组无序数组查询性能二分查找 O(log n) ✅线性扫描 O(n) ❌插入/删除需移位维护顺序 O(n) ❌直接操作尾部 O(1) ✅内存开销与无序数组相…...

编程新知 2025/8/3 11:17:37

蓝桥杯 2024 15届国赛 A组 儿童节快乐

P10576 [蓝桥杯 2024 国 A] 儿童节快乐 题目描述 五彩斑斓的气球在蓝天下悠然飘荡&#xff0c;轻快的音乐在耳边持续回荡&#xff0c;小朋友们手牵着手一同畅快欢笑。在这样一片安乐祥和的氛围下&#xff0c;六一来了。 今天是六一儿童节&#xff0c;小蓝老师为了让大家在节…...

编程新知 2025/12/5 2:40:04

dify打造数据可视化图表

一、概述 在日常工作和学习中&#xff0c;我们经常需要和数据打交道。无论是分析报告、项目展示&#xff0c;还是简单的数据洞察&#xff0c;一个清晰直观的图表&#xff0c;往往能胜过千言万语。 一款能让数据可视化变得超级简单的 MCP Server&#xff0c;由蚂蚁集团 AntV 团队…...

编程新知 2025/12/30 10:39:33

2023赣州旅游投资集团

单选题 1.“不登高山&#xff0c;不知天之高也&#xff1b;不临深溪&#xff0c;不知地之厚也。”这句话说明_____。 A、人的意识具有创造性 B、人的认识是独立于实践之外的 C、实践在认识过程中具有决定作用 D、人的一切知识都是从直接经验中获得的 参考答案: C 本题解…...

编程新知 2025/11/8 16:42:13