认识并理解webSocket

今天逛牛客,看到有大佬分享说前端面试的时候遇到了关于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);
实现效果

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

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/41884.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

策略为王股票软件源代码-----如何修改为自己软件61----资讯菜单修改-----举例---------调用同花顺网页------

http://stock.sina.com.cn 将原来的新浪行情,修改为同花顺, 搜索 stock.sina.com.cn... StkUI\View\InfoView.cpp(58):char

AI防损员的应用:正确率高达90%背后的真相与挑战

1. AI防损员的工作原理 AI防损员利用图像识别技术来判断商超中的行为是否异常。它将所有观察到的行为分为两类&#xff1a;正常行为和异常行为。这是一种二分类问题。 2. 数据不平衡问题 在现实中的商超环境中&#xff0c;正常行为占绝大多数&#xff0c;异常行为&#xff08;…

MySQL——备份

为什么要备份&#xff1f; 保证重要的数据不丢失 方便数据转移 MySQL数据库备份方式&#xff1a; 1. 直接拷贝物理文件 2. 在可视化工具中手动导出 —— 在想要导出的表或者库中&#xff0c;右键选择备份或导出 3. 使用命令行导出 mysqldump ——cmd打开命令行 —…

Python实现Mybatis Plus

Python实现Mybatis Plus from flask import g from sqlalchemy import asc, descclass QueryWrapperBuilder:conditions {}order_by_info {}def __new__(cls, *args, **kwargs):obj super(QueryWrapperBuilder, cls).__new__(cls)return objdef __init__(self, obj):self.o…

论文阅读--Simple Baselines for Image Restoration

这篇文章是 2022 ECCV 的一篇文章&#xff0c;是旷视科技的一篇文章&#xff0c;针对图像恢复任务各种网络结构进行了梳理&#xff0c;最后总结出一种非常简单却高效的网络结构&#xff0c;这个网络结构甚至不需要非线性激活函数。 文章一开始就提到&#xff0c;虽然在图像复原…

VRPTW(MATLAB):常春藤算法(IVY)求解带时间窗的车辆路径问题VRPTW,MATLAB代码

详细介绍 VRPTW&#xff08;MATLAB&#xff09;&#xff1a;常春藤算法&#xff08;Ivy algorithm&#xff0c;IVY&#xff09;求解带时间窗的车辆路径问题VRPTW&#xff08;提供MATLAB代码&#xff09;-CSDN博客 ********************************求解结果******************…

EtherCAT转Profinet网关配置说明第一讲:配置软件安装及介绍

网关XD-ECPNS20为EtherCAT转Profinet协议网关&#xff0c;使EtherCAT协议和Profinet协议两种工业实时以太网网络之间双向传输 IO 数据。适用于具有EtherCAT协议网络与Profinet协议网络跨越网络界限进行数据交换的解决方案。 本网关通过上位机来进行配置。 首先安装上位机软件 一…

Qt使用sqlite数据库及项目实战

一.sqlite使用介绍 在Qt中使用SQLite数据库非常简单&#xff0c;SQLite是一个轻量级的嵌入式数据库&#xff0c;不需要单独的数据库服务器&#xff0c;完全使用本地文件来存储数据。 当在Qt中使用SQLite数据库时&#xff0c;需要涉及到一些SQL语句以及Qt中的相关函数&#xf…

【海贼王的数据航海】ST表——RMQ问题

目录 1 -> RMQ问题 1.1 -> 定义 1.2 -> 解决策略 2 -> ST表 2.1 -> 定义 2.2 什么是可重复贡献问题 2.3 -> 预处理ST表 2.4 -> 处理查询 2.5 -> 实际问题 1 -> RMQ问题 1.1 -> 定义 RMQ (Range Minimum/Maximum Query)即区间最值查询…

Go 语言多版本管理的最佳实践 —— Linux 和 Windows 专题20240702

Go 语言多版本管理的最佳实践 —— Linux 和 Windows 专题 引言 在软件开发的世界里&#xff0c;保持开发环境的最新和兼容至关重要。特别是 Go 语言&#xff0c;随着版本的更新&#xff0c;不同项目可能需要不同的 Go 版本。这时&#xff0c;如何在同一台机器上高效管理多个…

黑马点评DAY2|Redis基本操作

Redis客户端 命令行客户端 进入到redis的安装目录&#xff0c;可以看到redis-cli文件&#xff0c;这就是redis的命令行客户端&#xff0c;在安装redis时自带的。 使用方式如下 redis-cli [options] [commonds]其中常见的options有&#xff1a; -h 127.0.0.1 &#xff1a;指…

电量监测与电量计基础知识

硬件之路学习笔记 ​-----前文导读----- ①、公众号主页点击发消息 ②、点击下方菜单获取系列文章 -----本文简介----- 主要内容包括&#xff1a; ①&#xff1a;简介 ②&#xff1a;省成本方式-电阻分压 ③&#xff1a;精确方式-电量计与阻抗跟踪技术 ----- 正文 ----…

Hugging face Transformers(1)—— 基础知识

Hugging Face 是一家在 NLP 和 AI 领域具有重要影响力的科技公司&#xff0c;他们的开源工具和社区建设为NLP研究和开发提供了强大的支持。它们拥有当前最活跃、最受关注、影响力最大的 NLP 社区&#xff0c;最新最强的 NLP 模型大多在这里发布和开源。该社区也提供了丰富的教程…

JavaWeb--jquery篇

概述 jQuery是一个快速、简洁的JavaScript框架&#xff0c;是一个优秀的JavaScript代码库&#xff08;框架&#xff09;于2006年1月由John Resig发布。它封装JavaScript常用的功能代码&#xff0c;提供一种简便的JavaScript设计模式&#xff0c;优化HTML文档操作、事件处理、动…

2229:Sumsets

网址如下&#xff1a; OpenJudge - 2229:Sumsets 这题不是我想出来的 在这里仅做记录 代码如下&#xff1a; #include<iostream> using namespace std;const int N 1000000000; int dp[1000010]; int n;int main() {cin >> n;dp[0] 1;dp[1] 1;for (int i 2…

前端面试题7(单点登录)

如何实现单点登录 单点登录&#xff08;Single Sign-On&#xff0c;简称SSO&#xff09;是一种允许用户在多个应用系统中只需登录一次&#xff0c;就可以访问所有相互信任的应用系统的认证技术。实现前端单点登录主要依赖于后端的支持和一些特定的协议&#xff0c;如OAuth、Ope…

无法下载cuda

cuda下载不了 一、台式机电脑浏览器打不开cuda下载下面二、解决办法 一、台式机电脑浏览器打不开cuda下载下面 用360、chrome、Edge浏览器都打不开下载页面&#xff0c;有的人说后缀com改成cn&#xff0c;都不行。知乎上说是网络问题&#xff0c;电信换成换成移动/联通的网络会…

Selenium 切换 frame/iframe

环境&#xff1a; Python 3.8 selenium3.141.0 urllib31.26.19说明&#xff1a; driver.switch_to.frame() # 将当前定位的主体切换为frame/iframe表单的内嵌页面中 driver.switch_to.default_content() # 跳回最外层的页面# 判断元素是否在 frame/ifame 中 # 126 邮箱为例 # …

无人机云台类型及作用

无人机云台主要分为三种类型&#xff1a; 单轴云台&#xff1a;仅支持单向旋转&#xff0c;适合拍摄平滑的延时摄影和全景照片。 双轴云台&#xff1a;支持水平和垂直旋转&#xff0c;可用于拍摄流畅的视频和运动物体。 三轴云台&#xff1a;全面支持所有旋转轴&#xff0c;…

医院陪诊系统开发的关键技术与挑战

随着医疗服务需求的不断提升&#xff0c;传统的医院服务模式面临着巨大的压力和挑战。为了提升患者的就医体验和医疗服务的效率&#xff0c;医院陪诊系统应运而生。本文将探讨医院陪诊系统开发的关键技术与挑战&#xff0c;并结合具体的技术代码进行分析。 一、医院陪诊系统的…