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

认识并理解webSocket

news 2026/3/26 22:53:06

今天逛牛客，看到有大佬分享说前端面试的时候遇到了关于webSocket的问题，一看自己都没见过这个知识点，赶紧学习一下，在此记录！

WebSocket 是一种网络通信协议，提供了全双工通信渠道，即客户端和服务器可以同时发送和接收数据。这与传统的HTTP请求不同，后者是单向的，客户端发起请求，服务器响应请求。WebSocket 允许服务器主动向客户端发送消息，这使得实时通信成为可能，例如在线聊天应用、实时游戏、股票行情更新等场景。

WebSocket 的基本概念

  1. 连接建立：客户端通过发送一个HTTP请求来发起WebSocket连接，这个请求中包含特定的头部，表明这是一个WebSocket握手请求。
  2. 握手：服务器接收到请求后，如果支持WebSocket，则响应一个HTTP响应，完成握手过程，建立WebSocket连接。
  3. 数据传输：一旦连接建立，客户端和服务器就可以通过这个连接发送数据。数据可以是文本或二进制格式。
  4. 连接关闭：任何一方都可以关闭WebSocket连接。

WebSocket 的使用步骤

  1. 创建WebSocket实例：在客户端，首先需要创建一个WebSocket实例，指定服务器的URL。

    const ws = new WebSocket('ws://example.com/socket');

  2. 处理连接事件：当WebSocket连接建立时，会触发open事件。

    ws.onopen = function(event) {console.log('WebSocket connection opened:', event);
};

  3. 发送数据：使用send方法向服务器发送数据。

    ws.send('Hello Server!');

  4. 接收数据：服务器发送的数据可以通过message事件接收。

    ws.onmessage = function(event) {console.log('Message from server:', event.data);
};

  5. 处理错误和关闭连接：WebSocket连接可能会遇到错误，或者需要主动关闭。

    ws.onerror = function(error) {console.error('WebSocket Error:', error);
};ws.onclose = function(event) {console.log('WebSocket connection closed:', event);
};// 可以主动关闭连接
ws.close();

使用nodejs实现一个简单的在线聊天demo。

客户端代码
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><!-- 简单的HTML界面 -->
<textarea id="messageInput" placeholder="Type a message..."></textarea>
<button id="sendButton">Send</button>
<div id="messages"></div><script>// 绑定按钮点击事件document.getElementById('sendButton').addEventListener('click', sendMessage);// 创建WebSocket连接const ws = new WebSocket('ws://localhost:8080');const messageInput = document.getElementById('messageInput');const messagesDiv = document.getElementById('messages');const sendButton = document.getElementById('sendButton');// 连接打开时触发ws.onopen = function(event) {console.log('Connected to the server');// 可以在这里禁用或启用按钮等sendButton.disabled = false;};// 接收到消息时触发ws.onmessage = function(event) {// 将接收到的消息添加到消息显示区域const messageElement = document.createElement('div');messageElement.textContent = event.data;messagesDiv.appendChild(messageElement);// 滚动到消息区域底部messagesDiv.scrollTop = messagesDiv.scrollHeight;};// 发送消息的函数function sendMessage() {if (ws.readyState === WebSocket.OPEN) {const message = messageInput.value;if (message) { // 确保消息不为空ws.send(message);messageInput.value = ''; // 清空输入框}} else {console.error('WebSocket is not connected. Cannot send message.');}}// 客户端连接错误时触发ws.onerror = function(error) {console.error('WebSocket error observed:', error);// 可以在这里显示错误信息或禁用发送按钮sendButton.disabled = true;};// 客户端关闭连接时触发ws.onclose = function(event) {console.log('WebSocket connection closed:', event);// 可以在这里禁用发送按钮或显示断开连接的信息sendButton.disabled = true;};
</script>
</body>
</html>
服务端代码

（注意要先使用npm install ws命令安装需要的库）

const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 8080 });// 存储所有客户端的集合
const clients = new Set();wss.on('connection', function connection(ws) {console.log('Client connected');// 将新的客户端WebSocket对象添加到集合中clients.add(ws);ws.on('message', function incoming(message) {console.log('received: %s', message);});ws.on('close', function() {console.log('Client disconnected');// 从集合中移除客户端clients.delete(ws);});// 可以在这里发送欢迎消息给新连接的客户端ws.send('Welcome to the chat!');
});// 假设我们有一个函数，用来向所有客户端广播消息
function broadcastMessage(message) {clients.forEach(client => {if (client.readyState === WebSocket.OPEN) {client.send(message);}});
}// 示例：每隔5秒向所有客户端发送当前时间
setInterval(() => {const currentTime = new Date().toLocaleTimeString();broadcastMessage(`Current time: ${currentTime}`);
}, 5000);
实现效果

客户端向服务端发送消息：

在这里插入图片描述
在这里插入图片描述
服务端向客户端发送消息：
每隔五秒发送当前的时间
在这里插入图片描述

相关文章：

认识并理解webSocket

今天逛牛客&#xff0c;看到有大佬分享说前端面试的时候遇到了关于webSocket的问题&#xff0c;一看自己都没见过这个知识点&#xff0c;赶紧学习一下&#xff0c;在此记录&#xff01; WebSocket 是一种网络通信协议&#xff0c;提供了全双工通信渠道&#xff0c;即客户端和服…...

编程日记 2024/7/10 3:34:01

Scissor算法-从含有表型的bulkRNA数据中提取信息进而鉴别单细胞亚群

在做基础实验的时候&#xff0c;研究者都希望能够改变各种条件来进行对比分析&#xff0c;从而探索自己所感兴趣的方向。 在做数据分析的时候也是一样的&#xff0c;我们希望有一个数据集能够附加了很多临床信息/表型&#xff0c;然后二次分析者们就可以进一步挖掘。 然而现实…...

编程日记 2024/7/10 3:33:00

Linux-磁盘空间不足的清理步骤（详细版本）

当 Linux 服务器出现 “no space left on device” 错误时，意味着磁盘空间已满，需要采取一些措施来清理磁盘，可以根据下面步骤依次清理： 1. 检查磁盘使用情况 首先，使用 df 和 du 命令检查磁盘使用情况，找出哪些目录占用了大量空间。 可以通过如下命令来查询 df -h举例…...

编程日记 2024/7/10 3:31:59

go-redis源码解析：连接池原理

1. 执行命令的入口方法 redis也是通过hook执行命令&#xff0c;initHooks时&#xff0c;会将redis的hook放在第一个 通过hook调用到process方法&#xff0c;process方法内部再调用_process 2. 线程池初始化 redis在新建单客户端、sentinel客户端、cluster客户端等&#xff0c…...

编程日记 2024/7/10 3:30:58

蓝桥杯备赛攻略（怒刷5个月拿省一）

十五届蓝桥杯结束&#xff0c;up也在这次比赛中获得了不错的成绩&#xff0c;为了帮助大家在25年蓝桥杯上获得好的成绩&#xff0c;我将根据今年的经验写一份蓝桥杯的备赛攻略&#xff0c;希望能帮到大家。 参赛准备 蓝桥杯算法赛必须指定一个编程语言赛道报名&#xff0c;也就…...

编程日记 2024/7/10 3:28:56

springboot项目jar包修改数据库配置运行时异常

一、背景 我将软件成功打好jar包了&#xff0c;到部署的时候发现jar包中数据库配置写的有问题&#xff0c;不想再重新打包了&#xff0c;打算直接修改配置文件&#xff0c;结果修改配置后&#xff0c;再通过java -jar运行时就报错了。 二、问题描述 本地项目是springBoot项目…...

编程日记 2024/7/10 3:27:54

倒计时 2 周！CommunityOverCode Asia 2024 IoT Community 专题部分

CommunityOverCode 是 Apache 软件基金会&#xff08;ASF&#xff09;的官方全球系列大会&#xff0c;其前身为 ApacheCon。自 1998 年以来&#xff0c;在 ASF 成立之前&#xff0c;ApacheCon 已经吸引了各个层次的参与者&#xff0c;在 300 多个 Apache 项目及其不同的社区中探…...

编程日记 2024/7/10 3:26:53

使用OpenCV在按下Enter键时截图并保存到指定文件夹

使用OpenCV在按下Enter键时截图并保存到指定文件夹 在这篇博客中&#xff0c;我们将介绍如何使用OpenCV库来实现一个简单的功能&#xff1a;在按下Enter键时从摄像头截图并保存到指定的文件夹中。这个功能可以用于各种应用&#xff0c;例如监控系统、视频捕捉等。 前置条件 …...

编程日记 2024/7/10 3:24:51

汇川伺服 （4）FFT、机械特性、闭环、惯量、刚性、抑制振动

一、参数解释 二、FFT 三、机械特性分析 四、多级配方与对象字典 对机组网配方 对象字典 五、InoServoShop 主要是用于调试620P620N将压缩报解压后不需要安装就可以直接使用 六、InoDriveWorkShop 主要是调试660 670 810 520 等系列 惯量识别 Etune Stune 惯量比调试 大惯…...

编程日记 2024/7/10 3:23:50

Unity3D中使用并行的Job完成筛选类任务详解

在Unity3D开发中&#xff0c;处理大量数据或执行复杂计算时&#xff0c;性能往往成为制约因素。为了提升游戏或应用的性能&#xff0c;Unity提供了强大的Job System&#xff0c;它允许开发者利用多线程和并行计算来优化数据处理过程。本文将详细介绍如何在Unity中使用并行的Job…...

编程日记 2024/7/10 3:22:49

汽车信息安全--欧盟汽车法规

目录 General regulation 信息安全法规 R155《网络安全及网络安全管理系统》解析 R156《软件升级与软件升级管理系统》解析 General regulation 欧洲的汽车行业受到一系列法律法规的约束&#xff0c;包括 各个方面包括&#xff1a; 1.安全要求&#xff1a;《通用安全条例&a…...

编程日记 2024/7/10 3:21:49

@SpringBootApplication 注解

什么是 SpringBootApplication SpringBootApplication 是 Spring Boot 提供的一个核心注解&#xff0c;它是一个组合注解&#xff0c;用于简化 Spring Boot 应用程序的配置。这个注解通常标注在主类上&#xff0c;用于标识一个 Spring Boot 应用的入口。通过这个注解&#xff…...

编程日记 2024/7/10 3:20:47

java项目总结4

目录 1.正则表达式 2.爬虫 3.时间 4.包装类 5.工具类之Arrays 6.Lambda 1.正则表达式 用于验证字符串是否满足自己所需要的规则。方法&#xff1a;matches 注意&#xff1a;\在Java中有特殊涵义&#xff0c;是将其它的意思本来化&#xff0c;假设"是用来引…...

编程日记 2024/7/10 3:18:46

JavaScript中的数组方法总结+详解

##JavaScript中的数组方法总结详解 用来总结和学习&#xff0c;便于自己查找 文章目录 一、数组是什么? 二、改变原数组的api方法&#xff1f;          2.1 push&#xff08;&#xff09; 在末端添加          2.2 pop&#xff0…...

编程日记 2024/7/10 3:17:45

环境变量Path

PATH 是一个环境变量&#xff0c;它在操作系统中扮演着非常重要的角色。它定义了系统在查找可执行文件时应该搜索的目录列表。当你在命令行中输入一个命令时&#xff0c;操作系统会按照 PATH 变量中定义的目录顺序来查找这个命令对应的可执行文件。 主要作用 查找可执行文件&a…...

编程日记 2024/7/10 3:16:43

基于jeecgboot-vue3的Flowable流程-集成仿钉钉流程（四）支持json和xml的显示

因为这个项目license问题无法开源&#xff0c;更多技术支持与服务请加入我的知识星球。 1、相应的界面前端代码 <template><div class"formDesign"><FlowDesign :process"process" :fields"fields" :readOnly"readOnly&quo…...

编程日记 2024/7/10 3:15:42

【k8s安装redis】k8s安装单机版redis实现高性能高可用

文章目录 简介一.条件及环境说明&#xff1a;二.需求说明&#xff1a;三.实现原理及说明四.详细步骤4.1.创建configmap 配置文件4.2.创建StatefulSet 配置4.3.创建service headless 配置 五.安装说明 简介 本文将根据在k8s环境中搭建【伪】单机模式的redis实例。由于共享存储的…...

编程日记 2024/7/10 3:14:41

Scala 数据类型

Scala 数据类型 Scala 是一种多范式的编程语言&#xff0c;它结合了面向对象和函数式编程的特点。在 Scala 中&#xff0c;数据类型是构建复杂程序的基础。本文将详细介绍 Scala 中的数据类型&#xff0c;包括其分类、特点以及使用方法。 数据类型分类 Scala 中的数据类型可…...

编程日记 2024/7/10 3:12:39

Java Executors类的9种创建线程池的方法及应用场景分析

在Java中&#xff0c;Executors 类提供了多种静态工厂方法来创建不同类型的线程池。在学习线程池的过程中&#xff0c;一定避不开Executors类&#xff0c;掌握这个类的使用、原理、使用场景&#xff0c;对于实际项目开发时&#xff0c;运用自如&#xff0c;以下是一些常用的方法…...

编程日记 2024/7/10 3:10:37

LY/T 3359-2023 耐化学腐蚀高压装饰层积板检测

耐化学腐蚀高压装饰层积板是指用酚醛树脂浸渍的层状植物纤维材料为基材&#xff0c;与涂布以丙烯酸树脂为主体的装饰纸的饰面层&#xff0c;在高温高压下层积压制而成的具有化学腐蚀功能的高压装饰层积板。 LY/T 3359-2023 耐化学腐蚀高压装饰层积板检测项目&#xff1a; 测试…...

编程日记 2024/7/10 3:08:34

从松到深：解析组合导航三大模式的演进路径与实战选型

1. 组合导航的底层逻辑与技术演进 第一次接触组合导航系统时&#xff0c;我被这个看似简单的概念惊艳到了——把两种完全不同的定位技术融合在一起&#xff0c;竟然能产生11>2的效果。这就像做菜时的黄金搭档&#xff0c;比如西红柿和鸡蛋单独吃都不错&#xff0c;但炒在一起…...

编程新知 2026/3/26 22:24:19

OpenClaw+Qwen3-32B双剑合璧：个人知识库的智能维护方案

OpenClawQwen3-32B双剑合璧&#xff1a;个人知识库的智能维护方案 1. 为什么需要自动化知识管理 作为一个长期依赖个人知识库的内容创作者&#xff0c;我发现自己正陷入"信息过载"的困境。每天需要处理的网页文章、PDF报告、会议录音等碎片化内容超过20份&#xff…...

编程新知 2026/3/26 22:16:15

抖音无水印视频智能下载与高效管理解决方案：从技术原理到行业应用

抖音无水印视频智能下载与高效管理解决方案&#xff1a;从技术原理到行业应用 【免费下载链接】douyin-downloader 项目地址: https://gitcode.com/GitHub_Trending/do/douyin-downloader 一、行业痛点与技术破局&#xff1a;重新定义视频内容获取效率 你是否曾遇到这…...

编程新知 2026/3/26 22:04:04

CosyVoice Docker Compose 中 model_id 的高效配置与优化实践

最近在部署 CosyVoice 语音服务时&#xff0c;我发现 docker-compose.yml 文件里的 model_id 配置项&#xff0c;虽然看起来只是简单的一行&#xff0c;但配置得当与否&#xff0c;直接关系到整个服务的部署效率、启动速度和资源开销。如果随便填一个值&#xff0c;或者不理解其…...

编程新知 2026/3/26 20:11:42

3大创新突破：FlashPatch如何让Flash内容重获新生

3大创新突破&#xff1a;FlashPatch如何让Flash内容重获新生 【免费下载链接】FlashPatch FlashPatch! Play Adobe Flash Player games in the browser after January 12th, 2021. 项目地址: https://gitcode.com/gh_mirrors/fl/FlashPatch 如何解决2021年后Flash内容无…...

编程新知 2026/3/26 20:03:35

ComfyUI实战：如何加载基于Flux.1微调的LoRA模型并优化推理流程

最近在项目里用 ComfyUI 部署基于 Flux.1 微调的 LoRA 模型&#xff0c;踩了不少坑。从模型加载失败到推理时显存爆炸&#xff0c;问题层出不穷。经过一番折腾&#xff0c;总算梳理出一套比较稳定的流程&#xff0c;这里把实战经验记录下来&#xff0c;希望能帮到有同样需求的同…...

编程新知 2026/3/26 19:29:08

ChatTTS在政务热线场景落地：拟真语音提升市民服务体验真实案例

ChatTTS在政务热线场景落地&#xff1a;拟真语音提升市民服务体验真实案例 1. 项目背景与价值 政务热线是政府与市民沟通的重要桥梁&#xff0c;但传统语音系统存在明显痛点&#xff1a;机械化的语音播报缺乏人情味&#xff0c;长时间等待的提示音让市民感到烦躁&#xff0c;…...

编程新知 2026/3/26 19:23:03

热门 PyPI 包 LiteLLM 遭投毒，窃取凭据和认证令牌

聚焦源代码安全&#xff0c;网罗国内外最新资讯&#xff01; 编译&#xff1a;代码卫士专栏供应链安全数字化时代&#xff0c;软件无处不在。软件如同社会中的“虚拟人”&#xff0c;已经成为支撑社会正常运转的最基本元素之一&#xff0c;软件的安全性问题也正在成为当今社会的…...

编程新知 2026/3/26 18:42:39

PlatformIO脚本进阶：告别修改库文件，用Python脚本精准控制FreeRTOS heap文件编译

PlatformIO脚本进阶&#xff1a;精准控制FreeRTOS堆管理文件编译的工程实践 在嵌入式开发中&#xff0c;第三方库的管理一直是个令人头疼的问题。特别是像FreeRTOS这样的实时操作系统&#xff0c;其源代码结构往往包含多个可选组件&#xff0c;开发者需要根据具体硬件和需求选择…...

编程新知 2026/3/26 18:16:02

SDMatte效果对比图谱：SDMatte/RemBG/BackgroundMattingV2在玻璃场景PK

SDMatte效果对比图谱&#xff1a;SDMatte/RemBG/BackgroundMattingV2在玻璃场景PK 1. 引言&#xff1a;玻璃抠图的特殊挑战 玻璃材质因其透明和反光特性&#xff0c;一直是图像抠图领域最具挑战性的对象之一。传统抠图工具在处理玻璃制品时&#xff0c;往往会出现边缘断裂、透…...

编程新知 2026/3/26 18:14:01