现代Web开发:WebSocket 实时通信详解

💓 博客主页:瑕疵的CSDN主页
📝 Gitee主页:瑕疵的gitee主页
⏩ 文章专栏:《热点资讯》

现代Web开发:WebSocket 实时通信详解

现代Web开发:WebSocket 实时通信详解

  • 现代Web开发:WebSocket 实时通信详解
    • 引言
    • WebSocket 概述
      • 什么是 WebSocket
      • WebSocket 的特点
    • WebSocket 工作原理
      • 握手过程
        • 客户端请求
        • 服务器响应
      • 数据帧
    • WebSocket API
      • 客户端 API
      • 服务器端实现
    • 实战案例分析
      • 实时聊天应用
        • 项目结构
        • 安装依赖
        • 创建 WebSocket 服务器
        • 创建客户端页面
        • 编写客户端脚本
    • WebSocket 安全性
      • 使用 WSS
      • 防止跨站请求伪造(CSRF)
    • WebSocket 与其他技术的比较
      • 与 AJAX 的比较
      • 与长轮询(Long Polling)的比较
    • 总结
    • 参考资料

引言

在现代Web开发中,实现实时通信是一个常见的需求。无论是在线聊天、实时协作编辑还是实时数据更新,WebSocket 技术都提供了强大的支持。本文将详细介绍 WebSocket 的基本概念、工作原理、实现步骤以及实际应用,帮助读者更好地理解和使用 WebSocket。

WebSocket 概述

什么是 WebSocket

WebSocket 是一种在单个 TCP 连接上进行全双工通信的协议。WebSocket 使得客户端和服务器之间的数据交换变得更加简单,允许服务端主动向客户端推送数据。在 WebSocket API 中,浏览器和服务器只需要完成一次握手,两者之间就直接可以创建持久性的连接,并进行双向数据传输。

WebSocket 的特点

  • 全双工通信:WebSocket 提供了真正的双向通信,客户端和服务器可以同时发送数据。
  • 低延迟:相比 HTTP 请求,WebSocket 的数据传输延迟更低。
  • 轻量级:WebSocket 协议的头部信息非常小,减少了不必要的开销。
  • 持久连接:一旦建立连接,除非客户端或服务器主动断开,否则连接会一直保持。

WebSocket 工作原理

握手过程

WebSocket 的握手过程是通过 HTTP 协议完成的。客户端发送一个特殊的 HTTP 请求,服务器响应一个特殊的 HTTP 状态码,从而完成握手。

客户端请求
GET /chat HTTP/1.1
Host: example.com
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ==
Sec-WebSocket-Version: 13
服务器响应
HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: s3pPLMBiTxaQ9kYGzzhZRbK+xOo=

数据帧

握手完成后,客户端和服务器开始通过 WebSocket 进行数据传输。数据传输的基本单位是帧(frame),每个帧都有自己的格式。

WebSocket API

客户端 API

在浏览器中,可以通过 WebSocket 对象来使用 WebSocket API。

const socket = new WebSocket('ws://example.com/socket');socket.onopen = function(event) {console.log('Connection opened:', event);
};socket.onmessage = function(event) {console.log('Message received:', event.data);
};socket.onclose = function(event) {console.log('Connection closed:', event);
};socket.onerror = function(error) {console.error('Error detected:', error);
};socket.send('Hello, server!');

服务器端实现

在服务器端,可以使用多种语言和框架来实现 WebSocket 服务器。以下是使用 Node.js 和 ws 库的示例。

  1. 安装 ws
npm install ws
  1. 创建 WebSocket 服务器
const WebSocket = require('ws');const wss = new WebSocket.Server({ port: 8080 });wss.on('connection', function connection(ws) {ws.on('message', function incoming(message) {console.log('Received:', message);});ws.send('Hello, client!');
});

实战案例分析

实时聊天应用

假设我们要构建一个简单的实时聊天应用,包含用户登录、发送消息和接收消息功能。

项目结构
chat-app/
├── client/
│   ├── index.html
│   └── script.js
├── server/
│   └── server.js
└── package.json
安装依赖
npm install ws
创建 WebSocket 服务器

server/server.js 中创建 WebSocket 服务器。

const WebSocket = require('ws');const wss = new WebSocket.Server({ port: 8080 });wss.on('connection', function connection(ws) {ws.on('message', function incoming(message) {console.log('Received:', message);wss.clients.forEach(function each(client) {if (client !== ws && client.readyState === WebSocket.OPEN) {client.send(message);}});});ws.send('Welcome to the chat!');
});console.log('WebSocket server is running on ws://localhost:8080');
创建客户端页面

client/index.html 中创建客户端页面。

<!DOCTYPE html>
<html lang='en'>
<head><meta charset='UTF-8'><title>Real-time Chat</title>
</head>
<body><div id='chat-container'><ul id='messages'></ul><input type='text' id='message-input' placeholder='Type a message...' /><button id='send-button'>Send</button></div><script src='./script.js'></script>
</body>
</html>
编写客户端脚本

client/script.js 中编写客户端脚本。

const socket = new WebSocket('ws://localhost:8080');const messagesList = document.getElementById('messages');
const messageInput = document.getElementById('message-input');
const sendButton = document.getElementById('send-button');socket.onopen = function(event) {console.log('Connection opened:', event);
};socket.onmessage = function(event) {const messageItem = document.createElement('li');messageItem.textContent = event.data;messagesList.appendChild(messageItem);
};socket.onclose = function(event) {console.log('Connection closed:', event);
};socket.onerror = function(error) {console.error('Error detected:', error);
};sendButton.addEventListener('click', function() {const message = messageInput.value;socket.send(message);messageInput.value = '';
});

WebSocket 安全性

使用 WSS

为了保证通信的安全性,可以使用 WSS(WebSocket Secure),即加密的 WebSocket 连接。WSS 使用 TLS/SSL 加密,确保数据传输的安全性。

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

防止跨站请求伪造(CSRF)

在 WebSocket 服务器端,可以通过验证 Origin 头来防止 CSRF 攻击。

wss.on('connection', function connection(ws, req) {if (req.headers.origin !== 'http://example.com') {ws.close();return;}// 正常处理连接
});

WebSocket 与其他技术的比较

与 AJAX 的比较

  • 数据传输方向:AJAX 只支持从客户端到服务器的单向数据传输,而 WebSocket 支持双向数据传输。
  • 延迟:AJAX 的每次请求都需要建立新的连接,延迟较高;WebSocket 一旦建立连接,数据传输延迟较低。
  • 资源消耗:AJAX 每次请求都会消耗一定的资源,而 WebSocket 在连接建立后,资源消耗较低。

与长轮询(Long Polling)的比较

  • 数据传输方向:长轮询也只支持从客户端到服务器的单向数据传输,而 WebSocket 支持双向数据传输。
  • 延迟:长轮询的延迟较高,因为每次请求都需要等待服务器响应;WebSocket 的延迟较低。
  • 资源消耗:长轮询会频繁建立和关闭连接,资源消耗较高;WebSocket 一旦建立连接,资源消耗较低。

总结

通过本文,我们深入了解了 WebSocket 的基本概念、工作原理、实现步骤以及实际应用。WebSocket 提供了一种高效、低延迟的实时通信方式,适用于多种应用场景。希望本文能帮助读者更好地理解和应用 WebSocket,提升Web开发能力。
WebSocket握手过程图

参考资料

  • WebSocket 官方文档
  • WebSocket API 参考
  • WebSocket 教程
    WebSocket数据帧结构图

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

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

相关文章

Hadoop完全分布式环境搭建步骤

【图书介绍】《Spark SQL大数据分析快速上手》-CSDN博客 大数据与数据分析_夏天又到了的博客-CSDN博客 本文介绍Hadoop完全分布式环境搭建方法&#xff0c;这个Hadoop环境用于安装配置Spark。假设读者已经安装好Visual Box 7.0.6虚拟环境与一个CentOS 7虚拟机&#xff08;如果…

133.鸿蒙基础01

鸿蒙基础 1.自定义构建函数1. 构建函数-[Builder ](/Builder )2. 构建函数-传参传递(单向)3. 构建函数-传递参数(双向)4. 构建函数-传递参数练习5. 构建函数-[BuilderParam ](/BuilderParam ) 传递UI 2.组件状态共享1. 状态共享-父子单向2. 状态共享-父子双向3. 状态共享-后代组…

如何保证kafka生产者数据可靠性

ack参数的设置&#xff1a; 0&#xff1a;生产者发送过来的数据&#xff0c;不需要等数据落盘应答 假如发送了Hello 和 World两个信息&#xff0c;Leader直接挂掉&#xff0c;数据就会丢失 生产者 ---> Kafka集群 一放进去就跑 数据可靠性分析&#xff1a;丢数 1&#…

业务模块部署

一、部署前端 1.1 window部署 下载业务模块前端包。 &#xff08;此包为耐威迪公司发布&#xff0c;请联系耐威迪客服或售后获得&#xff09; 包名为&#xff1a;业务-xxxx-business &#xff08;注&#xff1a;xxxx为发布版本号&#xff09; 此文件部署位置为&#xff1a;……

后台管理系统窗体程序:文章管理 > 文章列表

目录 文章列表的的功能介绍&#xff1a; 1、进入页面 2、页面内的各种功能设计 &#xff08;1&#xff09;文章表格 &#xff08;2&#xff09;删除按钮 &#xff08;3&#xff09;编辑按钮 &#xff08;4&#xff09;发表文章按钮 &#xff08;5&#xff09;所有分类下拉框 &a…

Windows10/11开启卓越性能模式 windows开启卓越性能电源模式 工作电脑开启卓越性能模式 电脑开启性能模式

Windows10/11开启卓越性能模式 windows开启卓越性能电源模式 工作电脑开启卓越性能模式 电脑开启性能模式 1、所要用到的激活工具2、开启电脑卓越性能模式Windows11Windows10在电源模式中选择卓越性能模式 3、将系统版本切换为 工作站版本 1、所要用到的激活工具 KMS激活工具(…

D62【python 接口自动化学习】- python基础之数据库

day62 SQL 基础 学习日期&#xff1a;20241108 学习目标&#xff1a;MySQL数据库-- 131 SQL基础和DDL 学习笔记&#xff1a; SQL的概述 SQL语言的分类 SQL的语法特征 DDL - 库管理 DDL - 表管理 总结 SQL是结构化查询语言&#xff0c;用于操作数据库&#xff0c;通用于绝大…

计算机图形学 实验二 三维模型读取与控制

目录 一、实验内容 二、具体内容 (在实验2.3的基础上进行修改) 1、OFF格式三维模型文件的读取 2、三维模型的旋转动画 3、键盘鼠标的交互 4、模型的修改 三、代码 一、实验内容 读取实验提供的off格式三维模型&#xff0c;并对其赋色。利用鼠标和键盘的交互&#xff0…

Redis 中 Bitmap 原理和应用

Bitmap Redis中的Bitmap&#xff08;位图&#xff09;是一种较为特殊数据类型&#xff0c;它以最小单位bit来存储数据&#xff0c;我们知道一个字节由 8个 bit 组成&#xff0c;和传统数据结构用字节存储相比&#xff0c;这使得它在处理大量二值状态&#xff08;true、false 或…

Springboot3.3.5 启动流程(源码分析)

一图搞懂 SpringBoot 启动流程&#xff08;清晰明了&#xff09;&#xff1a; createWebServer &#xff08;ServletWebApplicationContext&#xff09;流程 finishBeanFactoryInitialization&#xff08;ServletWebApplicationContext&#xff09;Bean装配流程 真正干活的&am…

CSS实现图片3D立体效果

概述 本文主要讲述如何通过 CSS 简单的设置就可以实现图片的 3D 立体效果。 3D 立体效果 当鼠标移入某一个图片上时,其余图片会像该图片倾斜。 具体实现 静图如下: 倒影效果图片会有一个倒影效果,其代码如下: <style>img {-webkit-box-reflect: below 1px linea…

java: 无法访问org.springframework.web.bind.annotation.RequestMapping

一、报错问题 java: 无法访问org.springframework.web.bind.annotation.RequestMapping 二、原因分析 SpringBoot使用了3.0或者3.0以上&#xff0c;因为Spring官方发布从Spring6以及SprinBoot3.0开始最低支持JDK17。所以仅需要将SpringBoot版本降低为3.0以下即可&#xff08;或…

Node.js:Express 服务 路由

Node.js&#xff1a;Express 服务 & 路由 创建服务处理请求req对象 静态资源托管托管多个资源挂载路径前缀 路由模块化 Express是Node.js上的一个第三方框架&#xff0c;可以快速开发一个web框架。本质是一个包&#xff0c;可以通过npm直接下载。 创建服务 Express创建一…

知识中台赋能法律咨询服务:八大核心优势

法律咨询服务领域&#xff0c;知识中台以其独特的功能和优势&#xff0c;为行业发展注入了新的活力。以下是知识中台在法律咨询服务中展现的八大核心优势&#xff1a; 一、法律知识资源的全面整合 知识中台致力于收集、整理和整合各类法律知识资源&#xff0c;包括法律法规、…

【青牛科技】GC5931:工业风扇驱动芯片的卓越替代者

在工业领域&#xff0c;工业风扇的稳定高效运行对于维持良好的生产环境至关重要。而驱动芯片作为工业风扇控制系统的核心元件&#xff0c;其性能直接影响风扇的工作状态。芯麦 GC5931 作为一款新型驱动芯片&#xff0c;在替代 A5931/Allegro 应用于工业风扇中展现出了非凡的优势…

使用Netty实现一个简单的聊天服务器

✅作者简介&#xff1a;热爱Java后端开发的一名学习者&#xff0c;大家可以跟我一起讨论各种问题喔。 &#x1f34e;个人主页&#xff1a;Hhzzy99 &#x1f34a;个人信条&#xff1a;坚持就是胜利&#xff01; &#x1f49e;当前专栏&#xff1a;Netty &#x1f96d;本文内容&a…

【HarmonyOS】鸿蒙应用低功耗蓝牙BLE的使用心得 (二)

【HarmonyOS】鸿蒙应用低功耗蓝牙BLE的使用心得 &#xff08;二&#xff09; 一、前言 目前鸿蒙应用的实现逻辑&#xff0c;基本都是参考和移植Android端来实现。针对BLE低功耗蓝牙来说&#xff0c;在鸿蒙化的实现过程中。我们发现了&#xff0c;鸿蒙独有的优秀点&#xff0c…

第六十三周周报 GCN-CNNGA

文章目录 week 63 GCN-CNNGA摘要Abstract1. 题目2. Abstract3. 文献解读3.1 Introduction3.2 创新点 4. 网络结构4.1 数据分析4.2 混合深度学习框架的发展4.3 Mul4.4 CNN block4.5 GCN block4.6 GRU block4.7 注意力机制4.8 模型评估标准 5. 实验结果5.1 不同邻接矩阵的性能评价…

geoserver+postgis 最短路径规划常见问题记录

一、说明 具体实现步骤可参考其他博文&#xff0c;下面的这个博主写的很详细&#xff0c;步骤很清晰&#xff0c;注释也很全。geoserverpostgis 最短路径规划_geoserver 最短路径 存储过程-CSDN博客 本次文章&#xff0c;仅记录过程中需要注意的方面。 二、数据预处理 目标&a…

石油安全理论知识题库 考试宝在线刷题

一、单选题&#xff08;每题有4个选项&#xff0c;其中只有1个是正确的&#xff0c;将正确的选项号填入括号内&#xff09; 1.新修订的《中华人民共和国安全生产法》于&#xff08; &#xff09;正式实施。 A、2014年1月1日 B、2014年12月1日 C、2015年1月1日 D、2015年…