利用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中运算符优先级
优先级顺序从高到低为： 括号 ()成员访问 . 和 函数调用 ()一元运算符 !、、-、~乘法 *、除法 /、取余 %加法 、减法 -位移运算符 <<、>>、>>>比较运算符 <、<、>、>等于 、不等于 !、严格等于 、严格不等于 !位与 &位异或 ^位…...
【人工智能】神经网络的优化器optimizer（二）：Adagrad自适应学习率优化器
一.自适应梯度算法Adagrad概述 Adagrad（Adaptive Gradient Algorithm）是一种自适应学习率的优化算法，由Duchi等人在2011年提出。其核心思想是针对不同参数自动调整学习率，适合处理稀疏数据和不同参数梯度差异较大的场景。Adagrad通…...
通过Wrangler CLI在worker中创建数据库和表
官方使用文档：Getting started Cloudflare D1 docs 创建数据库 在命令行中执行完成之后，会在本地和远程创建数据库： npx wranglerlatest d1 create prod-d1-tutorial 在cf中就可以看到数据库： 现在，您的Cloudfla…...
leetcodeSQL解题：3564. 季节性销售分析
leetcodeSQL解题：3564. 季节性销售分析 题目： 表：sales ---------------------- | Column Name | Type | ---------------------- | sale_id | int | | product_id | int | | sale_date | date | | quantity | int | | price | decimal | -…...
使用 SymPy 进行向量和矩阵的高级操作
在科学计算和工程领域，向量和矩阵操作是解决问题的核心技能之一。Python 的 SymPy 库提供了强大的符号计算功能，能够高效地处理向量和矩阵的各种操作。本文将深入探讨如何使用 SymPy 进行向量和矩阵的创建、合并以及维度拓展等操作，并通过具体…...
【Java学习笔记】BigInteger 和 BigDecimal 类
BigInteger 和 BigDecimal 类 二者共有的常见方法 方法功能add加subtract减multiply乘divide除 注意点：传参类型必须是类对象 一、BigInteger 1. 作用：适合保存比较大的整型数 2. 使用说明 创建BigInteger对象 传入字符串 3. 代码示例 import j…...
【VLNs篇】07：NavRL—在动态环境中学习安全飞行
项目内容论文标题NavRL: 在动态环境中学习安全飞行 (NavRL: Learning Safe Flight in Dynamic Environments)核心问题解决无人机在包含静态和动态障碍物的复杂环境中进行安全、高效自主导航的挑战，克服传统方法和现有强化学习方法的局限性。核心算法基于近端策略优化…...
华为OD机考-机房布局
import java.util.*;public class DemoTest5 {public static void main(String[] args) {Scanner in new Scanner(System.in);// 注意 hasNext 和 hasNextLine 的区别while (in.hasNextLine()) { // 注意 while 处理多个 caseSystem.out.println(solve(in.nextLine()));}}priv…...
解读《网络安全法》最新修订，把握网络安全新趋势
《网络安全法》自2017年施行以来，在维护网络空间安全方面发挥了重要作用。但随着网络环境的日益复杂，网络攻击、数据泄露等事件频发，现行法律已难以完全适应新的风险挑战。 2025年3月28日，国家网信办会同相关部门起草了《网络安全…...
【Linux系统】Linux环境变量：系统配置的隐形指挥官
。# Linux系列 文章目录 前言一、环境变量的概念二、常见的环境变量三、环境变量特点及其相关指令3.1 环境变量的全局性3.2、环境变量的生命周期 四、环境变量的组织方式五、C语言对环境变量的操作5.1 设置环境变量：setenv5.2 删除环境变量:unsetenv5.3 遍历所有环境…...
给网站添加live2d看板娘
给网站添加live2d看板娘 参考文献： stevenjoezhang/live2d-widget: 把萌萌哒的看板娘抱回家 (ノ≧∇≦)ノ | Live2D widget for web platformEikanya/Live2d-model: Live2d model collectionzenghongtu/live2d-model-assets 前言 网站环境如下，文章也主…...