利用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中运算符优先级
优先级顺序从高到低为： 括号 ()成员访问 . 和 函数调用 ()一元运算符 !、、-、~乘法 *、除法 /、取余 %加法 、减法 -位移运算符 <<、>>、>>>比较运算符 <、<、>、>等于 、不等于 !、严格等于 、严格不等于 !位与 &位异或 ^位…...
Unity3D中Gfx.WaitForPresent优化方案
前言 在Unity中，Gfx.WaitForPresent占用CPU过高通常表示主线程在等待GPU完成渲染（即CPU被阻塞），这表明存在GPU瓶颈或垂直同步/帧率设置问题。以下是系统的优化方案： 对惹，这里有一个游戏开发交流小组&…...
ElasticSearch搜索引擎之倒排索引及其底层算法
文章目录 一、搜索引擎1、什么是搜索引擎？2、搜索引擎的分类3、常用的搜索引擎4、搜索引擎的特点二、倒排索引1、简介2、为什么倒排索引不用B+树1.创建时间长，文件大。2.其次，树深，IO次数可怕。3.索引可能会失效。4.精准度差。三. 倒排索引四、算法1、Term Index的算法2、 …...
【服务器压力测试】本地PC电脑作为服务器运行时出现卡顿和资源紧张（Windows/Linux）
要让本地PC电脑作为服务器运行时出现卡顿和资源紧张的情况，可以通过以下几种方式模拟或触发： 1. 增加CPU负载 运行大量计算密集型任务，例如： 使用多线程循环执行复杂计算（如数学运算、加密解密等）。运行图…...
涂鸦T5AI手搓语音、emoji、otto机器人从入门到实战
“🤖手搓TuyaAI语音指令 😍秒变表情包大师，让萌系Otto机器人🔥玩出智能新花样！开整！” 🤖 Otto机器人 → 直接点明主体 手搓TuyaAI语音 → 强调 自主编程/自定义 语音控制（TuyaAI…...
Spring数据访问模块设计
前面我们已经完成了IoC和web模块的设计，聪明的码友立马就知道了，该到数据访问模块了，要不就这俩玩个6啊，查库势在必行，至此，它来了。 一、核心设计理念 1、痛点在哪 应用离不开数据（数据库、No…...
云原生玩法三问：构建自定义开发环境
云原生玩法三问：构建自定义开发环境 引言 临时运维一个古董项目，无文档，无环境，无交接人，俗称三无。 运行设备的环境老，本地环境版本高，ssh不过去。正好最近对 腾讯出品的云原生 cnb 感兴趣&…...
用机器学习破解新能源领域的“弃风”难题
音乐发烧友深有体会，玩音乐的本质就是玩电网。火电声音偏暖，水电偏冷，风电偏空旷。至于太阳能发的电，则略显朦胧和单薄。 不知你是否有感觉，近两年家里的音响声音越来越冷，听起来越来越单薄？ —…...
初探Service服务发现机制
1.Service简介 Service是将运行在一组Pod上的应用程序发布为网络服务的抽象方法。 主要功能：服务发现和负载均衡。 Service类型的包括ClusterIP类型、NodePort类型、LoadBalancer类型、ExternalName类型 2.Endpoints简介 Endpoints是一种Kubernetes资源…...
【C++特殊工具与技术】优化内存分配(一)：C++中的内存分配
目录 一、C 内存的基本概念 1.1 内存的物理与逻辑结构 1.2 C 程序的内存区域划分 二、栈内存分配 2.1 栈内存的特点 2.2 栈内存分配示例 三、堆内存分配 3.1 new和delete操作符 4.2 内存泄漏与悬空指针问题 4.3 new和delete的重载 四、智能指针…...
Git 3天2K星标：Datawhale 的 Happy-LLM 项目介绍（附教程）
引言 在人工智能飞速发展的今天，大语言模型（Large Language Models, LLMs）已成为技术领域的焦点。从智能写作到代码生成，LLM 的应用场景不断扩展，深刻改变了我们的工作和生活方式。然而，理解这些模型的内部…...