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

embedded/2024/11/8 17:51:39/
💓 博客主页:瑕疵的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.ppmy.cn/embedded/135947.html

相关文章

如何利用指纹浏览器爬虫绕过Cloudflare的防护?

网络爬虫能够系统地浏览网页并提取所需的数据&#xff0c;通常被用于市场研究、数据分析或者竞争情报。然而&#xff0c;一些反爬虫机制给网络爬虫的工作带来了不少挑战和风险。 其中&#xff0c;Cloudflare提供了多层次的防护机制&#xff0c;包括IP封锁、速率限制、CAPTCHA验…

DBA之路,始于足下

DBA之路&#xff0c;始于足下 与DBA的缘分工作一年的体会未来的规划 与DBA的缘分 我以前从来没有想过会成为一名DBA。从进入研究生开始&#xff0c;我就已经给自己规划好了找工作的学习路线-Java开发工程师。我从算法、项目、八股、面试等各个方面展开准备&#xff0c;所有的面…

RuleAlign 规则对齐框架:将医生的诊断规则形式化并注入模型,无需额外人工标注的自动对齐方法

RuleAlign 规则对齐框架&#xff1a;将医生的诊断规则形式化并注入模型&#xff0c;无需额外人工标注的自动对齐方法 提出背景论文大纲怎么用数据进行归纳推理&#xff1f;综合调研解法拆解全流程分析问题在于&#xff0c;我怎么构造这种规则数据&#xff1f;多轮问诊改进 论文…

Android CALL关于电话音频和紧急电话设置和获取

获取音频服务&#xff0c;设置音源类型&#xff1a;电话类型和获取最大电话音量&#xff0c;响铃模式 private AudioManager mAudioManager; mAudioManager (AudioManager) getSystemService(AUDIO_SERVICE); mAudioManager.setStreamVolume(AudioManager.STREAM_VOIC…

RHCE

第六章 DNS域名解析服务器 DNS简介 DNS&#xff08;Domain Name System&#xff09;是互联网上的一项服务&#xff0c;它作为将域名和IP地址相互映射的一个分布式 数据库&#xff0c;能够使人更方便的访问互联网。 DNS系统使用的是网络的查询&#xff0c;那么自然需要有监听…

NLP segment-20-分词开源项目介绍 HanLP 未来十年的自然语言处理

拓展阅读 分词系列专题 jieba-fenci 01 结巴分词原理讲解 segment jieba-fenci 02 结巴分词原理讲解之数据归一化 segment jieba-fenci 03 结巴分词与繁简体转换 segment jieba-fenci 04 结巴分词之词性标注实现思路 speechTagging segment jieba-fenci 05 结巴分词之简单…

43.第二阶段x86游戏实战2-提取游戏里面的lua

免责声明&#xff1a;内容仅供学习参考&#xff0c;请合法利用知识&#xff0c;禁止进行违法犯罪活动&#xff01; 本次游戏没法给 内容参考于&#xff1a;微尘网络安全 本人写的内容纯属胡编乱造&#xff0c;全都是合成造假&#xff0c;仅仅只是为了娱乐&#xff0c;请不要…

微信小程序的汽车维修预约管理系统

文章目录 项目介绍具体实现截图技术介绍mvc设计模式小程序框架以及目录结构介绍错误处理和异常处理java类核心代码部分展示详细视频演示源码获取 项目介绍 系统功能简述 前台用于实现用户在页面上的各种操作&#xff0c;同时在个人中心显示各种操作所产生的记录&#xff1a;后…