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

极简聊天室-websocket版

news 2026/2/9 5:18:44

再写一个极简聊天室的websocket版，在本例中，websocket仅用于服务器向客户端传输信息，客户端向服务器发送信息是传统的http post方式，用axios来实现的，当然websocket本身是支持双向通信，主要是为了方便跟前面的SSE方式对照比较而已。
后端代码稍有不同，为方便使用websocket，引入了express-ws，是不是感觉到代码量更少了。

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)); });app.post('/sendmsg',express.json(), (req,res)=>{msgs.push(req.body);res.json({"code":200});wsServer.getWss().clients.forEach(client=>{ client.send(JSON.stringify(req.body)) });
});app.listen(3000, () => { console.log(`极简聊天室WebSocket版服务启动`); })

前端html文件内容也稍有不同

<!DOCTYPE html>
<html>
<head>
<title>极简聊天室websocket版</title>
<meta charset="utf-8">
<script src="jquery-3.6.1.min.js"></script>
<script src="axios.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()	{ axios.post("http://localhost:3000/sendmsg",{"uid":uid,"msg":$("#msg").val()}).then(()=>$("#msg").val("")) }
</script>
</body>
</html>

浏览器访问
在这里插入图片描述

在这里插入图片描述

相关文章：

极简聊天室-websocket版

再写一个极简聊天室的websocket版&#xff0c;在本例中&#xff0c;websocket仅用于服务器向客户端传输信息&#xff0c;客户端向服务器发送信息是传统的http post方式&#xff0c;用axios来实现的&#xff0c;当然websocket本身是支持双向通信&#xff0c;主要是为了方便跟前面…...

编程日记 2024/8/7 4:36:06

QT学生管理系统 开发文档

目录 第一章 UI界面设计与开发 登录界面 主界面 UI美化 第二章 数据库设计与开发 数据库设计 连接数据库 数据库功能设计 sql语句设计 查询所有学生数量 查询第几页学生数据 删除学生 修改学生信息 清空学生表 添加单个用户 删除单个用户 修改用户权限 查询所有用户…...

编程日记 2024/8/7 4:35:05

【五大海内外高校支持】2024年数字经济与计算机科学国际学术会议（DECS2024）

大会官网&#xff1a;www.icdecs.net 大会时间&#xff1a;2024年9月20-22日 大会地点&#xff1a;中国-厦门 截稿日期&#xff1a;详情见官网 支持单位 马来西亚理工大学 北京科技大学经济管理学院 南京信息工程大学 马来西亚敦胡先翁大学 大会嘉宾 大会主席 罗航…...

编程日记 2024/8/7 4:34:03

VS项目打包成lib库并使用

一、新建一个静态库项目 一般要把项目设为Release模式 二、添加文件 将所需要打包的头文件、源文件添加到该静态库项目中 三、生成项目 生成成功后即可在Release文件夹出现找到相应的.lib文件 四、使用静态库 将静态库文件复制到项目文件夹中&#xff0c;然后在项目属性设…...

编程日记 2024/8/7 4:32:00

社交巨头与去中心化：解析Facebook在区块链的角色

区块链技术的兴起为多个行业带来了变革&#xff0c;而社交平台也正在经历这一波技术浪潮。作为全球最大的社交网络之一&#xff0c;Facebook&#xff08;现名Meta Platforms&#xff09;在区块链领域的探索展示了其如何应对去中心化趋势的挑战&#xff0c;并利用这一技术推动自…...

编程日记 2024/8/7 4:29:59

MyBatis(学习记录)

一、ORM ORM是“对象关系映射”&#xff08;Object-Relational Mapping&#xff09;的缩写。这是一种编程技术&#xff0c;用于将对象模型与关系型数据库系统之间的数据进行转换。在面向对象的编程语言中&#xff0c;数据通常以对象的形式表示&#xff1b;而在关系型数据库中&a…...

编程日记 2024/8/7 4:28:58

QSpinbox

加载图片资源 在项目中&#xff0c;选择新建&#xff0c;QT->Qt Resource File -choose &#xff0c;命名为 image ,创建完成了&#xff0c;会在目录下生成一个image.qrc。我们资源文件&#xff0c;要放在image.qrc 的同级目录或子目录中。 常用的小功能 在左下方&#x…...

编程日记 2024/8/7 4:27:57

分布式服务架构[原理、设计与实践]学习笔记

地震是由不可抗力导致的&#xff0c;而事故与之不同&#xff0c;任何大的生产事故在发生之前都有迹可循&#xff0c;而且事故的发生并不是偶然的&#xff0c;我们应该善于从现象中总结规律&#xff0c;找到发现、止损和避免的方法 海恩法则 每一起严重事故的背后&#xff0c;必…...

编程日记 2024/8/7 4:26:56

PDF发票解析并将信息回填到前端（1）后端解析PDF

文章目录 参考文章技术栈需求解析发票类型 1. 最终项目结构1.1 说明 2. 相关代码2.1 导入相应的maven依赖2.2 实体类2.3 工具类2.4 三层架构controllerservicemapper 参考文章 参考文章 技术栈 SpringBootVue 需求 本文主要是实现提取发票中的部分内容&#xff0c;并实现自…...

编程日记 2024/8/7 4:25:55

C++练习之插入删除

#include <iostream> #include <ctime> #include <cstring> #include<cstdlib> using namespace std;typedef struct bookInfo {char name[10];float price;int num; }BOOKINFO;// p: 结构体数组首元素地址 // n: 有效图书数量 void Print(const BOOKI…...

编程日记 2024/8/7 4:24:54

【LeetCode】238. 除自身以外数组的乘积

除自身以外数组的乘积 题目描述&#xff1a; 给你一个整数数组 nums&#xff0c;返回 数组 answer &#xff0c;其中 answer[i] 等于 nums 中除 nums[i] 之外其余各元素的乘积 。 题目数据 保证 数组 nums之中任意元素的全部前缀元素和后缀的乘积都在 32 位 整数范围内。 请…...

编程日记 2024/8/7 4:23:52

Excel公式与函数（运算符，计算限制，错误检查）（一）

公式 公式概念 公式 是以“”号为引导&#xff0c;用过运算符按照一定的顺序组合进行数据运算处理的等式&#xff0c;函数 则是按特定算法执行计算的产生一个或一组结果的预定义的特殊公式。 公式组成要素 公式的组成要素为“”&#xff0c;运算符&#xff0c;单元格引用&a…...

编程日记 2024/8/7 4:22:50

用AI助手写程序

用AI帮助写程序究竟靠不靠谱&#xff0c;下面来测试一下&#xff1a; 在文心一言中输入&#xff1a;写一个C Windows API串口通信程序。结果如下&#xff1a; #include <windows.h> #include <iostream> // 串口配置 void ConfigureCommPort(HANDLE hComm) {…...

编程日记 2024/8/7 4:21:49

动手学深度学习7.2 使用块的网络（VGG）-笔记练习（PyTorch）

以下内容为结合李沐老师的课程和教材补充的学习笔记&#xff0c;以及对课后练习的一些思考&#xff0c;自留回顾&#xff0c;也供同学之人交流参考。 本节课程地址&#xff1a;25 使用块的网络 VGG【动手学深度学习v2】_哔哩哔哩_bilibili 本节教材地址&#xff1a;7.2. 使用…...

编程日记 2024/8/7 4:20:47

SolidityFoundry ERC4626

ERC4626简介 ERC4626 协议是一种用于代币化保险库的标准。 我们经常说 DeFi 是货币乐高&#xff0c;可以通过组合多个协议来创造新的协议&#xff1b; ERC4626 扩展了 ERC20 代币标准&#xff0c;旨在推动收益金库的标准化&#xff0c;它是 DeFi 乐高中的基础&#xff0c;它允…...

编程日记 2024/8/7 4:19:46

大模型时代的操作系统：融合 Rust 和大模型，打造 AI 操作系统

每次技术革命&#xff0c;无论是个人电脑、互联网还是移动设备&#xff0c;总是从硬件开始&#xff0c;然后演化到软件层。而操作系统是计算机系统的核心&#xff0c;没有它&#xff0c;计算机就只是一堆硬件&#xff0c;无法运行任何程序。 微软 CEO 萨蒂亚纳德拉曾将生成式 …...

编程日记 2024/8/7 4:17:44

【ML】为什么要做batch normlization，怎么做batch normlization

为什么要做batch normlization&#xff0c;怎么做batch normlization 1. batch normlization1.1 批量归一化是什么&#xff1a;1.2 为什么要做批量归一化&#xff1a; 2. feature normalization2.1 特征归一化是什么&#xff1a;2.2 为什么要做特征归一化&#xff1a; 3. batc…...

编程日记 2024/8/7 4:16:43

【C++指南】命名空间

&#x1f493; 博客主页&#xff1a;倔强的石头的CSDN主页 &#x1f4dd;Gitee主页&#xff1a;倔强的石头的gitee主页 ⏩ 文章专栏&#xff1a;《C指南》 期待您的关注 目录 一、命名空间的重要性 1. C语言中没有命名空间而存在的问题 2. C引入了命名空间解决的问题 3.…...

编程日记 2024/8/7 4:15:42

RocketMQ Dashboard安装

RocketMQ Dashboard 是一个基于 Web 的管理工具&#xff0c;用于监控和管理 RocketMQ 集群。它提供了一个用户友好的界面&#xff0c;使管理员能够轻松地查看和操作 RocketMQ 系统中的各种组件和状态。 主要功能包括&#xff1a; 集群管理: 监控和管理 NameServer 和 Broker …...

编程日记 2024/8/7 4:14:37

前端web开发HTML+CSS3+移动web（0基础,超详细）——第3天

目录 一&#xff0c;列表-无序和有序的定义列表 二&#xff0c;表格-基本使用与表格结构标签 三&#xff0c;合并单元格 四&#xff0c;表单-input标签 五&#xff0c;表单-下拉菜单 六&#xff0c;表单-文本域 七&#xff0c;表单-label标签 八&#xff0c;表单-按钮 …...

编程日记 2024/8/7 4:13:36

React hook之useRef

React useRef 详解 useRef 是 React 提供的一个 Hook&#xff0c;用于在函数组件中创建可变的引用对象。它在 React 开发中有多种重要用途&#xff0c;下面我将全面详细地介绍它的特性和用法。 基本概念 1. 创建 ref const refContainer useRef(initialValue);initialValu…...

编程新知 2025/6/11 15:21:26

React第五十七节 Router中RouterProvider使用详解及注意事项

前言 在 React Router v6.4 中&#xff0c;RouterProvider 是一个核心组件&#xff0c;用于提供基于数据路由&#xff08;data routers&#xff09;的新型路由方案。 它替代了传统的 <BrowserRouter>&#xff0c;支持更强大的数据加载和操作功能&#xff08;如 loader 和…...

编程新知 2026/1/21 9:06:43

STM32标准库-DMA直接存储器存取

文章目录 一、DMA1.1简介1.2存储器映像1.3DMA框图1.4DMA基本结构1.5DMA请求1.6数据宽度与对齐1.7数据转运DMA1.8ADC扫描模式DMA 二、数据转运DMA2.1接线图2.2代码2.3相关API 一、DMA 1.1简介 DMA&#xff08;Direct Memory Access&#xff09;直接存储器存取 DMA可以提供外设…...

编程新知 2026/1/26 10:55:51

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

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

编程新知 2026/2/8 4:08:40

JS设计模式(4)：观察者模式

JS设计模式(4):观察者模式 一、引入 在开发中&#xff0c;我们经常会遇到这样的场景&#xff1a;一个对象的状态变化需要自动通知其他对象&#xff0c;比如&#xff1a; 电商平台中&#xff0c;商品库存变化时需要通知所有订阅该商品的用户&#xff1b;新闻网站中&#xff0…...

编程新知 2025/9/1 6:48:07

【Linux】Linux 系统默认的目录及作用说明

博主介绍&#xff1a;✌全网粉丝23W&#xff0c;CSDN博客专家、Java领域优质创作者&#xff0c;掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域✌ 技术范围&#xff1a;SpringBoot、SpringCloud、Vue、SSM、HTML、Nodejs、Python、MySQL、PostgreSQL、大数据、物…...

编程新知 2026/1/29 2:30:31

渗透实战PortSwigger靶场：lab13存储型DOM XSS详解

进来是需要留言的&#xff0c;先用做简单的 html 标签测试 发现面的</h1>不见了 数据包中找到了一个loadCommentsWithVulnerableEscapeHtml.js 他是把用户输入的<>进行 html 编码&#xff0c;输入的<>当成字符串处理回显到页面中&#xff0c;看来只是把用户输…...

编程新知 2026/2/4 18:11:56

如何配置一个sql server使得其它用户可以通过excel odbc获取数据

要让其他用户通过 Excel 使用 ODBC 连接到 SQL Server 获取数据&#xff0c;你需要完成以下配置步骤&#xff1a; ✅ 一、在 SQL Server 端配置&#xff08;服务器设置&#xff09; 1. 启用 TCP/IP 协议 打开 “SQL Server 配置管理器”。导航到&#xff1a;SQL Server 网络配…...

编程新知 2025/8/25 19:37:12

DeepSeek越强，Kimi越慌？

被DeepSeek吊打的Kimi&#xff0c;还有多少人在用&#xff1f; 去年&#xff0c;月之暗面创始人杨植麟别提有多风光了。90后清华学霸&#xff0c;国产大模型六小虎之一&#xff0c;手握十几亿美金的融资。旗下的AI助手Kimi烧钱如流水&#xff0c;单月光是投流就花费2个亿。 疯…...

编程新知 2026/1/28 12:15:05

RushDB开源程序 是现代应用程序和 AI 的即时数据库。建立在 Neo4j 之上

一、软件介绍 文末提供程序和源码下载 RushDB 改变了您处理图形数据的方式 — 不需要 Schema&#xff0c;不需要复杂的查询&#xff0c;只需推送数据即可。 二、Key Features ✨ 主要特点 Instant Setup: Be productive in seconds, not days 即时设置 &#xff1a;在几秒钟…...

编程新知 2026/2/5 4:20:19