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

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

news 2026/2/8 16:10:47

我们知道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

在HarmonyOS ArkTS ArkUI-X 5.0及以上版本中，手势开发全攻略：

在 HarmonyOS 应用开发中&#xff0c;手势交互是连接用户与设备的核心纽带。ArkTS 框架提供了丰富的手势处理能力&#xff0c;既支持点击、长按、拖拽等基础单一手势的精细控制&#xff0c;也能通过多种绑定策略解决父子组件的手势竞争问题。本文将结合官方开发文档&#xff0c…...

编程新知 2025/9/19 4:31:58

Vue3 + Element Plus + TypeScript中el-transfer穿梭框组件使用详解及示例

使用详解 Element Plus 的 el-transfer 组件是一个强大的穿梭框组件&#xff0c;常用于在两个集合之间进行数据转移&#xff0c;如权限分配、数据选择等场景。下面我将详细介绍其用法并提供一个完整示例。 核心特性与用法 基本属性 v-model&#xff1a;绑定右侧列表的值&…...

编程新知 2026/2/4 4:25:40

最新SpringBoot+SpringCloud+Nacos微服务框架分享

文章目录 前言一、服务规划二、架构核心1.cloud的pom2.gateway的异常handler3.gateway的filter4、admin的pom5、admin的登录核心 三、code-helper分享总结 前言 最近有个活蛮赶的&#xff0c;根据Excel列的需求预估的工时直接打骨折&#xff0c;不要问我为什么&#xff0c;主要…...

编程新知 2026/2/1 23:39:12

c#开发AI模型对话

AI模型 前面已经介绍了一般AI模型本地部署&#xff0c;直接调用现成的模型数据。这里主要讲述讲接口集成到我们自己的程序中使用方式。 微软提供了ML.NET来开发和使用AI模型&#xff0c;但是目前国内可能使用不多&#xff0c;至少实践例子很少看见。开发训练模型就不介绍了&am…...

编程新知 2026/2/1 8:59:45

2025季度云服务器排行榜

在全球云服务器市场&#xff0c;各厂商的排名和地位并非一成不变&#xff0c;而是由其独特的优势、战略布局和市场适应性共同决定的。以下是根据2025年市场趋势&#xff0c;对主要云服务器厂商在排行榜中占据重要位置的原因和优势进行深度分析&#xff1a; 一、全球“三巨头”…...

编程新知 2026/1/23 3:36:07

海云安高敏捷信创白盒SCAP入选《中国网络安全细分领域产品名录》

近日&#xff0c;嘶吼安全产业研究院发布《中国网络安全细分领域产品名录》&#xff0c;海云安高敏捷信创白盒&#xff08;SCAP&#xff09;成功入选软件供应链安全领域产品名录。 在数字化转型加速的今天&#xff0c;网络安全已成为企业生存与发展的核心基石&#xff0c;为了解…...

编程新知 2026/2/8 13:00:10

UE5 音效系统

一.音效管理 音乐一般都是WAV,创建一个背景音乐类SoudClass,一个音效类SoundClass。所有的音乐都分为这两个类。再创建一个总音乐类&#xff0c;将上述两个作为它的子类。 接着我们创建一个音乐混合类SoundMix&#xff0c;将上述三个类翻入其中&#xff0c;通过它管理每个音乐…...

编程新知 2026/1/29 17:39:27

Linux操作系统共享Windows操作系统的文件

目录 一、共享文件 二、挂载 一、共享文件 点击虚拟机选项-设置 点击选项&#xff0c;设置文件夹共享为总是启用&#xff0c;点击添加&#xff0c;可添加需要共享的文件夹 查询是否共享成功 ls /mnt/hgfs 如果显示Download&#xff08;这是我共享的文件夹&#xff09;&…...

编程新知 2026/1/23 16:40:08

安宝特方案丨从依赖经验到数据驱动：AR套件重构特种装备装配与质检全流程

在高压电气装备、军工装备、石油测井仪器装备、计算存储服务器和机柜、核磁医疗装备、大型发动机组等特种装备生产型企业&#xff0c;其产品具有“小批量、多品种、人工装配、价值高”的特点。 生产管理中存在传统SOP文件内容缺失、SOP更新不及、装配严重依赖个人经验、产品装…...

编程新知 2026/1/28 21:07:50

Three.js + Vue3 加载GLB模型项目代码详解

本说明结合 src/App.vue 代码，详细解释如何在 Vue3 项目中用 three.js 加载并显示 glb 模型。 1. 依赖与插件导入 import {onMounted, onUnmounted } from vue import * as THREE from three import Stats from stats.js import {OrbitControls } from three/examples/jsm/co…...

编程新知 2025/11/16 14:13:49