利用SSE打造极简web聊天室
在B/S场景中，通常我们前端主动访问后端可以使用axios，效果很理想，而后端要访问前端则不能这样操作了，可以考虑SSE、websocket等方式，实时和性能均有保障。
下面给出一个简单的SSE例子，后端是node+express，前端是html+javascript(jquery+axios) 实现一个简单的web聊天室。
不说废话，直接上代码：
const stringRandom = require("string-random");const express = require('express');
const app = express();var msgs=[];
var clients=[];app.use('/', express.static('./'));app.get('/events', (req,res)=>{res.writeHead(200, { 'Content-Type': 'text/event-stream', 'Connection': 'keep-alive', 'Cache-Control': 'no-cache' });res.write(`data: ${JSON.stringify(msgs)}\n\n`);let clientid=stringRandom(32, { letters: 'ABCDEF' })clients.push({ "clientid":clientid, "res":res });req.on('close', () => { clients = clients.filter(item => (item.clientid != clientid)); });
});app.post('/sendmsg',express.json(), (req,res)=>{msgs.push(req.body);res.json({"code":200});clients.forEach(client=>{ client.res.write(`data: ${JSON.stringify(req.body)}\n\n`) });
});app.listen(3000, () => { console.log(`极简聊天室服务启动`); })
<!DOCTYPE html>
<html>
<head>
<title>极简聊天室</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";const evtSource = new EventSource("http://localhost:3000/events");evtSource.addEventListener('message', function(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>浏览器访问效果如下：
相关文章：
利用SSE打造极简web聊天室
在B/S场景中，通常我们前端主动访问后端可以使用axios，效果很理想，而后端要访问前端则不能这样操作了，可以考虑SSE、websocket等方式，实时和性能均有保障。 下面给出一个简单的SSE例子，后端是nodeexpress&am…...
代码随想录第二十天|动态规划（4）
目录 LeetCode 322. 零钱兑换 LeetCode 279. 完全平方数 LeetCode 139. 单词拆分 总结 LeetCode 322. 零钱兑换 题目链接：LeetCode 322. 零钱兑换 思想：首先定义dp数组的含义，dp[j]即总金额为j的情况下所需的最少的硬币个数。接下来确定…...
TreeSize：免费的磁盘清理与管理神器，解决C盘爆满的燃眉之急
目录 TreeSize：免费的磁盘清理与管理神器，解决C盘爆满的燃眉之急 一、TreeSize介绍 二、下载安装TreeSize 2.1、下载地址 2.2、下载步骤 2.3、安装步骤 三、professional版的TreeSize试用 3.1、分析磁盘空间 3.2、显示拓展名统计信息 3.3、显…...
如何建立自己的技术知识体系
已经工作五年了，慢慢的觉得不能再继续像以前一样，工作中用到啥才去学啥，平时积累的知识也是非常的零碎，我现在要做的就是建立自己的技术知识体系。 我感觉学习技术知识就想是探索一个城市一样，技术知识体系就好比是这…...
JS优化了4个自定义倒计时
<!DOCTYPE html> <html lang"zh-CN"><head><meta charset"UTF-8"><title>4个自定义倒计时</title><style>* {margin: 0;padding: 0;box-sizing: border-box;user-select: none;body {background: #0b1b2c;}}hea…...
模型实战（25）之 基于LoFTR深度学习匹配算法实现图像拼接
模型实战（25）之 基于LoFTR深度学习匹配算法实现图像拼接 图像拼接在全景图、大图或者多目场景下经常会被使用，常用的方法有传统图像处理算法和深度学习直接获取对应点的算法传统图像处理算法过程繁琐，阈值少且整体算法结果对调参比较敏感，其主要通过形状、特征点等描述子对…...
计算机毕业设计Python+Spark知识图谱高考志愿推荐系统 高考数据分析 高考可视化 高考大数据 大数据毕业设计
《Spark高考推荐系统》开题报告 一、选题背景及意义 1. 选题背景 随着我国高考制度的不断完善和大数据技术的飞速发展，高考志愿填报已成为考生和家长高度关注的重要环节。传统的志愿填报方式依赖于考生和家长手动查找和对比各种信息，不仅效率低下且容…...
【python】文件
在python中可以通过文件操作，将数据保存到计算机硬盘中文件，可以包含文本数据，也可以包含二进制数据(图片，视频，音频等)。 目录 前言 正文 一、基本语法 1、函数open()打开file 返回一个文件对象 1.1、文件路径 1&a…...
《Attention Is All You Need》核心观点及概念
这个文件据说是一篇很厉害的AI论文，https://arxiv.org/pdf/1706.03762 这篇论文《Attention Is All You Need》确实是AI领域中的一个里程碑，它改变了我们处理语言的方式。 下面小编会用简单的语言来解释这篇文章的核心观点和学术概念，并告诉大家它为什么很厉害。 核心观点…...
【中项】系统集成项目管理工程师-第9章 项目管理概论-9.9价值交付系统
前言：系统集成项目管理工程师专业，现分享一些教材知识点。觉得文章还不错的喜欢点赞收藏的同时帮忙点点关注。 软考同样是国家人社部和工信部组织的国家级考试，全称为“全国计算机与软件专业技术资格（水平）考试”&…...
JS+H5美观的带搜索的博客文章列表（可搜索多个参数）
实现 美观的界面（电脑、手机端界面正常使用）多参数搜索（文章标题，文章简介，文章发布时间等）文章链接跳转 效果图 手机端 电脑端 搜索实现 搜索功能实现解释 定义文章数据: 文章数据保存在一个 JavaScri…...
)
牛客周赛 Round 54 (c++题解)
比赛地址 : 牛客竞赛_ACM/NOI/CSP/CCPC/ICPC算法编程高难度练习赛_牛客竞赛OJ A 输出o的个数； #include<bits/stdc.h> #define IOS ios::sync_with_stdio(0);cin.tie(0);cout.tie(0); #define endl \n using namespace std; typedef long long LL;inlin…...
htsjdk库Genotype及相关类介绍
在 HTSJDK 库中，处理基因型的主要类包括 Genotype、FastGenotype、GenotypeBuilder 以及相关的类和接口。以下是这些类和接口的详细介绍： Genotype 类 主要功能 表示基因型：Genotype 类用于表示个体在特定变异位置上的基因型。基因型是对个体在变异位置上的等位基因组合的…...
C++ 最短路（spfa） 洛谷
拉近距离 题目背景 我是源点，你是终点。我们之间有负权环。 ——小明 题目描述 在小明和小红的生活中，有 N 个关键的节点。有 M 个事件，记为一个三元组 (Si,Ti,Wi)，表示从节点 Si 有一个事件可以转移到 Ti，事件…...
MySQL的数据类型
文章目录 数据类型分类整型bit类型浮点类型字符串类型charvarchar 日期和时间类型enum和set find_ in_ set 数据类型分类 整型 在MySQL中，整型可以指定是有符号的和无符号的，默认是有符号的。 可以通过UNSIGNED来说明某个字段是无符号的。 在MySQL中如…...
xss漏洞（四，xss常见类型）
本文仅作为学习参考使用，本文作者对任何使用本文进行渗透攻击破坏不负任何责任。 前言： 1，本文基于dvwa靶场以及PHP study进行操作，靶场具体搭建参考上一篇： xss漏洞（二，xss靶场搭建以及简单…...
繁简之争：为什么手机芯片都是 ARM
RISC 和 CISC 指令集 之前的文章《揭秘 CPU 是如何执行计算机指令的》中说到，如果从软件的角度来讲，CPU 就是一个执行各种计算机指令（Instruction Code）的逻辑机器。 计算机指令集是计算机指令的集合，包括各种类型的…...
【nnUNetv2进阶】十九、nnUNetv2 使用ResidualEncoder训练模型
nnunet使用及改进教程。 【nnUNetv2实践】一、nnUNetv2安装 【nnUNetv2实践】二、nnUNetv2快速入门-训练验证推理集成一条龙教程 【nnUNetv2进阶】三、nnUNetv2 自定义网络-发paper必会-CSDN博客 其他网络改进参考： 【nnUNetv2进阶】四、nnUNetv2 魔改网络-小试牛刀-加入…...
Unity3D ShaderGraph 场景扫描光效果实现详解
引言 在Unity3D游戏开发中，创建吸引人的视觉效果是提升游戏沉浸感的关键之一。场景扫描光效果，作为一种动态且富有表现力的视觉元素，能够为游戏场景增添不少亮点。通过Unity的ShaderGraph工具，我们可以轻松地实现这种效果&#x…...
JS中运算符优先级
优先级顺序从高到低为： 括号 ()成员访问 . 和 函数调用 ()一元运算符 !、、-、~乘法 *、除法 /、取余 %加法 、减法 -位移运算符 <<、>>、>>>比较运算符 <、<、>、>等于 、不等于 !、严格等于 、严格不等于 !位与 &位异或 ^位…...
LangChain知识库管理后端接口：数据库操作详解—— 构建本地知识库系统的基础《二》
这段 Python 代码是一个完整的 知识库数据库操作模块，用于对本地知识库系统中的知识库进行增删改查（CRUD）操作。它基于 SQLAlchemy ORM 框架 和一个自定义的装饰器 with_session 实现数据库会话管理。 📘 一、整体功能概述 该模块…...
Linux部署私有文件管理系统MinIO
最近需要用到一个文件管理服务，但是又不想花钱，所以就想着自己搭建一个，刚好我们用的一个开源框架已经集成了MinIO，所以就选了这个 我这边对文件服务性能要求不是太高，单机版就可以 安装非常简单，几个命令就…...
[USACO23FEB] Bakery S
题目描述 Bessie 开了一家面包店! 在她的面包店里，Bessie 有一个烤箱，可以在 t C t_C tC 的时间内生产一块饼干或在 t M t_M tM 单位时间内生产一块松糕。 ( 1 ≤ t C , t M ≤ 10 9 ) (1 \le t_C,t_M \le 10^9) (1≤tC,tM≤109)。由于空间…...
【实施指南】Android客户端HTTPS双向认证实施指南
🔐 一、所需准备材料 证书文件（6类核心文件） 类型 格式 作用 Android端要求 CA根证书 .crt/.pem 验证服务器/客户端证书合法性 需预置到Android信任库 服务器证书 .crt 服务器身份证明 客户端需持有以验证服务器 客户端证书 .crt 客户端身份…...
JS红宝书笔记 - 3.3 变量
要定义变量，可以使用var操作符，后跟变量名 ES实现变量初始化，因此可以同时定义变量并设置它的值 使用var操作符定义的变量会成为包含它的函数的局部变量。 在函数内定义变量时省略var操作符，可以创建一个全局变量 如果需要定义…...
Python 高级应用10：在python 大型项目中 FastAPI 和 Django 的相互配合
无论是python，或者java 的大型项目中，都会涉及到 自身平台微服务之间的相互调用，以及和第三发平台的 接口对接，那在python 中是怎么实现的呢？ 在 Python Web 开发中，FastAPI 和 Django 是两个重要但定位不…...
Linux 内存管理调试分析：ftrace、perf、crash 的系统化使用
Linux 内存管理调试分析：ftrace、perf、crash 的系统化使用 Linux 内核内存管理是构成整个内核性能和系统稳定性的基础，但这一子系统结构复杂，常常有设置失败、性能展示不良、OOM 杀进程等问题。要分析这些问题，需要一套工具化、…...
十二、【ESP32全栈开发指南： IDF开发环境下cJSON使用】
一、JSON简介 JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，具有以下核心特性： 完全独立于编程语言的文本格式易于人阅读和编写易于机器解析和生成基于ECMAScript标准子集 1.1 JSON语法规则 {"name"…...
如何使用CodeRider插件在IDEA中生成代码
一、环境搭建与插件安装 1.1 环境准备 名称要求说明操作系统Windows 11JetBrains IDEIntelliJ IDEA 2025.1.1.1 (Community Edition)硬件配置推荐16GB内存50GB磁盘空间 1.2 插件安装流程 步骤1：市场安装 打开IDEA，进入File → Settings → Plugins搜…...
Digital IC Design Flow
Flow介绍 1.设计规格 架构师根据市场需求制作算法模型（Algorithm emulation）及芯片架构（Chip architecture），确定芯片设计规格书（Chip design specification） 原型验证 原型验证（Prototype Validation）通常位于产品开发流程的前期阶段，主要是在设计和开发的初步阶…...