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

极简聊天室-websocket版(双向通信)

news 文章来源：https://blog.csdn.net/dgiij/article/details/140850644 2025/1/12 20:09:17

我们知道WebSocket是可以双向通信的，把极简聊天室代码又改了一下，前端发信息到后端也使用websocket，其实代码量更少了。。。

const express = require('express');
const app = express();
var wsServer = require('express-ws')(app)var msgs=[];app.use('/', express.static('./'));app.ws('/ws', (ws,req)=>{ws.send(JSON.stringify(msgs));ws.on('message', msg => {msgs.push(JSON.parse(msg));wsServer.getWss().clients.forEach(client=>{ client.send(msg) });})
});app.listen(3000, () => { console.log(`极简聊天室WebSocket版服务启动`); })
<!DOCTYPE html>
<html>
<head>
<title>极简聊天室websocket版</title>
<meta charset="utf-8">
<script src="jquery-3.6.1.min.js"></script>
</head>
<body>
<input id="msg"></input><button id="send" onclick=sendmsg()>发送</button>
<ul id="msgs">
</ul>
<script>
var uid;
let reg = new RegExp("(^|&)" + "uid" + "=([^&]*)(&|$)","i");
let r = location.search.substr(1).match(reg);
uid=(r!=null)?decodeURI(r[2]):"me";var ws = new WebSocket("http://localhost:3000/ws");ws.onmessage = event => {let jvar=JSON.parse(event.data);if (jvar instanceof Array) { jvar.forEach(item=>{ $("#msgs").append(`<li>${item.uid} 说: ${item.msg}</li>`)  })  }else { $("#msgs").append(`<li>${jvar.uid} 说: ${jvar.msg}</li>`) }
}function sendmsg()	{  ws.send(JSON.stringify({"uid":uid,"msg":$("#msg").val()})) }
</script>
</body>
</html>

效果跟前面一样，就不再贴图了。

相关文章：

极简聊天室-websocket版(双向通信)

我们知道WebSocket是可以双向通信的&#xff0c;把极简聊天室代码又改了一下&#xff0c;前端发信息到后端也使用websocket&#xff0c;其实代码量更少了。。。 const express require(express); const app express(); var wsServer require(express-ws)(app)var msgs[];ap…...

编程日记 2024/8/3 0:18:19

从小白到架构师 | 缓存预热

缓存预热指的是在系统启动或上线前&#xff0c;提前将经常访问的数据加载到缓存中&#xff0c;以避免在系统刚启动时&#xff0c;用户大量请求直接访问数据库&#xff0c;导致数据库压力过大或系统性能下降。通过缓存预热&#xff0c;可以确保系统一上线就能提供快速的响应时间…...

编程日记 2024/8/3 0:17:18

Modbus -- TCP协议

MODBUS TCP协议是一种基于TCP/IP协议的Modbus变种&#xff0c;它允许Modbus协议在以太网网络上运行&#xff0c;使得设备之间可以通过IP网络交换数据。 一:协议概述 modbus_TCP协议:走的是网口&#xff0c;所以需要创建TCPclient对象进行通信,和modubus-RTU协议最大的区别是&a…...

编程日记 2024/8/3 0:16:17

python四舍五入取整数

在Python中&#xff0c;如果你想要对一个浮点数进行四舍五入并取整&#xff08;即只保留整数部分&#xff09;&#xff0c;你可以使用内置的round()函数&#xff0c;但不指定第二个参数&#xff08;即小数位数&#xff09;&#xff0c;或者明确指定为0。这样&#xff0c;Python…...

编程日记 2024/8/3 0:13:15

洛谷 P1868 饥饿的奶牛

原题 题目描述 有一条奶牛冲出了围栏&#xff0c;来到了一处圣地&#xff08;对于奶牛来说&#xff09;&#xff0c;上面用牛语写着一段文字。 现用汉语翻译为&#xff1a; 有 N 个区间&#xff0c;每个区间x,y 表示提供的x∼y 共y−x1 堆优质牧草。你可以选择任意区间但不…...

编程日记 2024/8/3 0:12:14

Arco Design 之Table表格

此篇文章为table表格示例&#xff0c;包含列、data数据、展开、选中、自定义等相关属性 基础表格 <a-table :columns"columns1" :data"tableData1" />const columns1 [{ title: "编号", dataIndex: "no"},{ title: "名称…...

编程日记 2024/8/3 0:10:11

Python机器学习 模型

Python机器学习模型、回归预测模型、数据清洗、数据处理、数据挖掘、数据分析代做。 模型不仅限于线性回归、逻辑回归、决策树、SVM、随机森林、贝叶斯、XGBoost、LightGBM、CatBoost&#xff0c;聚类&#xff1a;K-Means、DBSCAN&#xff0c;机器学习都可。 时间序列分析&…...

编程日记 2024/8/3 0:09:10

基于 STM32 的 NAS私有云盘搭建：集成LwIP 协议、HTTP/HTTPS、WEB前端技术栈（代码示例）

项目概述 在本项目中&#xff0c;我们将搭建一个基于 STM32 的 NAS&#xff08;网络附加存储&#xff09;私盘&#xff0c;通过网络访问存储在外部 SATA 硬盘上的文件。该项目将使用 STM32 开发板、外接 SATA 硬盘、LwIP 协议栈以及 FATFS 文件系统来实现文件的上传、下载和管…...

编程日记 2024/8/3 0:07:09

蓝屏？死机？爆CPU？多开卡顿？你有关心过你的硬盘吗？

上来先叠甲 蓝屏、死机、爆cpu、多开卡顿&#xff0c;不一定是硬盘的问题&#xff0c;只是硬盘有问题都可能会引起这些现象&#xff0c;所以不要遇到这些问题就一定认为是硬盘的问题然后说我说的&#xff0c;只是给你一个排除问题的思路。本文会采用比较通俗所以不太专业的角度…...

编程日记 2024/8/3 0:06:07

Flutter开发报错error: unable to unlink old ‘pubspec.yaml‘: Invalid argument

背景&#xff1a;主分支master&#xff0c;然后每人1个分支&#xff0c;每次push到自己分支后&#xff0c;再提mr到master。 于是每次提交前要先git merge origin/master。 有时候会报这个错误&#xff0c;无法merge 原因&#xff1a;很简单&#xff0c;就是pubspec.yaml这个文…...

编程日记 2024/8/3 0:05:07

零基础进程最详解：进程状态、僵尸进程、孤儿进程、阻塞态、挂起态、进程切换、进程常用命令、进程创建、队列优先级

目录 强烈建议全文阅读&#xff01;&#xff01;&#xff01; 强烈建议全文阅读&#xff01;&#xff01;&#xff01; 强烈建议全文阅读&#xff01;&#xff01;&#xff01; 一、进程状态 二、僵尸和孤儿进程 1、僵尸进程 Z&#xff08;zombie&#xff09; 2、孤儿进…...

编程日记 2024/8/3 0:04:05

Redis的分布式锁

目录 一、定义与原理 基于Redis的分布式锁 获取锁 释放锁 锁误删问题&#xff1a;因为key值一样,将别人的锁删掉了 锁误判问题二&#xff1a;判断锁和释放锁不是原子性的 Lua脚本 分布式锁&#xff1a;满足分布式系统或集群模式下多进程可见并且互斥的锁 分布式锁的优点…...

编程日记 2024/8/3 0:03:04

C++笔记---类和对象

1. 类的定义 类是C中的一种自定义类型&#xff0c;是某个具体事物或概念的抽象化代码表示&#xff0c;通过类的成员&#xff08;变量函数/方法&#xff09;&#xff0c;可以表征出事物或概念的特征。 1.1 类定义的格式 class Stack { public:// 成员函数void Init(int n 4)…...

编程日记 2024/8/3 0:00:02

全国区块链职业技能大赛样题第9套后端源码

后端源码地址：https://blog.csdn.net/Qhx20040819/article/details/140746050 前端源码地址：https://blog.csdn.net/Qhx20040819/article/details/140746216 智能合约+数据库表设计：https://blog.csdn.net/Qhx20040819/article/details/140746646 项目预览 登录 用户管理...

编程日记 2024/8/2 23:59:00

3个功能强大的PDF转换工具，免费试用

给大家分享3个功能强大能满足更高需求的PDF转换工具&#xff0c;都提供免费的试用机会。 1.嗨动PDF编辑器 一款多功能的PDF编辑软件&#xff0c;集PDF阅读、PDF转换、PDF编辑功能为一体。支持转换的格式多样&#xff0c;转换速度快&#xff0c;转换后的排版和内容与原文保持一…...

编程日记 2024/8/2 23:58:00

表单修改数字输入框保留小数点

1.在表单设计打开修改的表单 2.打开需要修改的字段 3.按F12&#xff0c;进入“开发模式” 4.开启“开发者工具”左上角检索工具 开启&#xff1a;鼠标左键点击&#xff0c;当图标颜色为蓝色 关闭&#xff1a;鼠标左键点击&#xff0c;当图标颜色为灰色 5.鼠标移动到需要修改的…...

编程日记 2024/8/2 23:56:59

[VS Code扩展]写一个代码片段管理插件（一）：介绍与界面搭建

文章目录 VS Code扩展机制项目搭建创建UI元素活动栏按钮主边栏视图主边栏工具栏按钮侧边栏右键菜单编辑器右键菜单 项目地址 [VS Code扩展]写一个代码片段管理插件&#xff08;一&#xff09;&#xff1a;介绍与界面搭建[VS Code扩展]写一个代码片段管理插件&#xff08;二&…...

编程日记 2024/8/2 23:55:57

vxe grid slots 用法

官方例子&#xff1a;Vxe Table v3.8 {field: num1,title: Num1,showHeaderOverflow: true,filters: [{ data: }],editRender: { autofocus: .my-input },slots: {// 使用插槽模板渲染default: num1_default,header: num1_header,footer: num1_footer,filter: num1_filter,edi…...

编程日记 2024/8/2 23:54:55

【网络】基于UDP协议的聊天室（第二篇）

目录 UDP服务器 UDP客户端 在C中&#xff0c;使用UDP协议进行网络通信通常涉及到socket编程。下面我将给出基于UDP的简单的客户端和服务器示例代码。这些示例将使用C标准库以及POSIX套接字接口&#xff08;主要适用于Linux和类Unix系统&#xff09;。如果你在使用Windows&…...

编程日记 2024/8/2 23:53:54

【SpringBoot3】场景整合（实战）

0 环境准备 0.0 云服务器 阿里云、腾讯云、华为云 服务器开通&#xff1b; 按量付费&#xff0c;省钱省心 安装以下组件&#xff1a;docker、redis、kafka、prometheus、grafana 下载windterm&#xff1a; https://github.com/kingToolbox/WindTerm/releases/download/2.5…...

编程日记 2024/8/2 23:52:53

【全网最全最详细】MYSQL 面试题大全（上）

目录 一、关系型数据库和非关系型数据库主要有哪些区别？ 二、MYSQL的数据存储一定是基于硬盘的吗？ 三、InnoDB和MyISAM有什么区别？ 四、MyISAM的索引结构是怎么样的？存在的问题是什么？ 五、char和varchar的区别？ 六、MYSQL 5.x和8.0有什么区别？ 七、为什么大厂不…...

编程日记 2024/8/2 23:48:45

【C语言】程序环境，预处理，编译，汇编，链接详细介绍，其中预处理阶段重点讲解

目录 程序环境 翻译环境 1. 翻译环境的两个过程 2. 编译过程的三个阶段 执行环境 预处理(预编译) 1. 预定义符号 2. #define 2.1 用 #define 定义标识符(符号) 2.2 用 #define 定义宏 2.3 #define 的替换规则 2.4 # 和 ## 的用法 2.5 宏和函数 2.6 #undef …...

编程日记 2024/8/2 23:47:44

人生低谷来撸C#--021 多线程

1、概念 线程 被定义为程序的执行路径。每个线程都定义了一个独特的控制流。如果您的应用程序涉及到复杂的和耗时的操作&#xff0c;那么设置不同的线程执行路径往往是有益的&#xff0c;每个线程执行特定的工作。 线程是轻量级进程。一个使用线程的常见实例是现代操作系统中…...

编程日记 2024/8/2 23:46:43

【优秀python django系统案例】基于python的医院挂号管理系统，角色包括医生、患者、管理员三种

随着信息技术的迅猛发展&#xff0c;传统的医院挂号管理方式面临着效率低下、排队时间长、信息不对称等诸多问题。这些问题不仅影响患者的就医体验&#xff0c;也加重了医院工作人员的负担。在此背景下&#xff0c;基于Python的医院挂号管理系统应运而生。该系统旨在通过信息化…...

编程日记 2024/8/2 23:45:42

硬盘数据丢失不再怕，四大恢复工具帮你轻松逆转局面！

硬盘故障、误删文件、病毒攻击等原因导致数据丢失的情况时有发生。面对这种情况&#xff0c;如何高效、快速地进行硬盘数据恢复呢&#xff1f;接下来几款好用的数据恢复软件推荐给大家。 一、福昕数据恢复&#xff1a;全方位恢复&#xff0c;让数据无遗漏 链接&#xff1a;ww…...

编程日记 2024/8/2 23:44:41

自定义封装日历组件

自定义日历 工作需要&#xff0c;但现有框架封装的日历无法满足需求&#xff0c;又找不到更好的插件&#xff0c;所以准备自己封装一个。 效果图和说明 一个很简易版的demo日历&#xff0c;本文只提供最基本的功能代码&#xff0c;便于阅读二开。 新建calendar.vue文件 <…...

编程日记 2024/8/2 23:42:39

【大模型】【面试】独家总结表格

问题解答你能解释一下Transformer架构及其在大型语言模型中的作用吗？Transformer架构是一种深度神经网络架构，于2017年由Vaswani等人在他们的论文“Attention is All You Need”中首次提出。自那以后，它已成为大型语言模型（如BERT和GPT）最常用的架构。 Transformer架构使用…...

编程日记 2024/8/2 23:41:38

C# 6.定时器 timer

使用控件&#xff1a; 开启定时器&#xff1a;timer1.Start(); 关闭定时器&#xff1a;timer1.Stop(); 定时间时间间隔:Interval timer1.Interval 1000; Interva等于1000是每一秒刷新一次 定时器默认时间间隔是100ms 代码创建定时器 ①创建 Timer t1 new Timer(); …...

编程日记 2024/8/2 23:40:35

有了 createSlice，还有必要使用 createReducer 吗？什么情况需要 createReducer 呢？

通常情况下&#xff0c;使用 createSlice 已经足够满足大多数需求&#xff0c;而不需要直接使用 createReducer。但是&#xff0c;在某些特定场景下&#xff0c;createReducer 仍然有其用处&#xff1a; 更细粒度的控制&#xff1a; 当你需要对 reducer 的行为进行更精细的控制…...

编程日记 2024/8/2 23:39:33

怎么搭建AI带货直播间生成虚拟主播?

随着电商直播带货的热潮不断升温&#xff0c;虚拟主播逐渐崭露头角&#xff0c;成为电商直播领域的新宠&#xff0c;相较于真人主播&#xff0c;虚拟主播具备无档期风险、人设稳定可控、24小时不间断直播等显著优势。 本文将深入探讨如何搭建一个AI带货直播间&#xff0c;并详…...

编程日记 2024/8/2 23:38:32

网站开发工程师项目经验怎么写/百度推广电话客服24小时

最近在研究 TP受益匪浅... http://今天就从 基本函数 M和D开始高手莫见笑..有不对的地方 望一起讨论两个有共同点..都是实例化对象用的..但是 在使用时 两者却不一样...为什么??先看看代码函数M http://blog.csdn.net/siren0203/article/details/5974415...

编程日记 2025/1/12 18:08:42

做影视网站存储视频会侵权吗/网络销售是做什么的

视频写在前面上章节中介绍了Deployment&#xff0c;ReplicaSet&#xff0c;ReplicationController等副本1. DaemonSet控制器1.1 DaemonSet简介介绍DaemonSet时我们先来思考一个问题&#xff1a;相信大家都接触过监控系统比如zabbix&#xff0c;监控系统需要在被监控机安装一个a…...

编程日记 2025/1/12 14:33:17

怎么优化一个网站/杭州seo价格

第一步&#xff1a;准备好项目代码 第二步&#xff1a;选择File – Project Structure 第三步&#xff1a;选择Artifacts&#xff0c;并选择号&#xff0c;选择JAR&#xff0c;选择From modules with… 第四步&#xff1a;选择Main Class和META-INF 选择OK 第五步&#xf…...

编程日记 2025/1/12 13:17:09

有了域名空间怎么做网站/网络营销品牌推广

携手创作&#xff0c;共同成长&#xff01;这是我参与「掘金日新计划 8 月更文挑战」的第16天&#xff0c;点击查看活动详情 降低阅读负担&#xff0c;启发创作心智&#xff0c;轻松学习 JavaScript 技巧&#xff0c;日拱一卒&#xff0c;jym&#xff0c;冲~ 注&#xff1a;本…...

编程日记 2025/1/12 11:06:25

南通优普网站建设团队/百度图片识别搜索

相关操作学习记录备忘录 echo offrem 1、添加winrar压缩软件到系统环境变量&#xff0c;才可以压缩文件 rem 2、设置变量 不能有空格 "set a 123"(报错) "set a123"(正确) rem 3、强制删除文件夹 /s /q rem 4、重命名文件 第二个参数必须是文件…...

编程日记 2025/1/12 10:36:50

网站ico添加/跟我学seo

JDK环境变量的配置 新建->变量名"JAVA_HOME"&#xff0c;变量值"C:\Program Files\Java\jdk1.8.0_291"&#xff08;即JDK的安装路径&#xff09; 编辑->变量名"Path"&#xff0c;点击"新建"&#xff0c;然后输入上"%JAVA…...

编程日记 2025/1/12 9:55:21