WebSocket的应用场景与案例解析

马剑威（威哥爱编程）2024-08-21 15:26

WebSocket是一种网络通信协议，它支持在单个TCP连接上进行全双工通信，允许服务器主动向客户端推送信息，客户端也可以主动向服务器发送信息，实现真正的双向平等对话。WebSocket技术基于TCP协议，与HTTP协议具有良好的兼容性，数据格式轻量且性能开销小，可以发送文本和二进制数据，没有同源限制，适用于多种应用场景，如在线聊天、实时游戏、股票行情更新等。

WebSocket 介绍

WebSocket的实现原理相对简单，通过在HTTP协议中添加Upgrade头部来告知服务器需要升级协议。如果服务器支持WebSocket协议，则返回101状态码表示协议升级成功，之后客户端和服务器就可以通过WebSocket协议进行实时通信 。

WebSocket技术的特点包括：

  1. 实时性高：WebSocket可以实现实时通信，传输数据的延迟更低。
  2. 减少网络带宽使用：通过建立持久化连接，减少了HTTP协议中每次请求和响应所需的网络带宽。
  3. 双向通信：支持全双工通信，客户端和服务器可以同时发送和接收数据。
  4. 跨域支持：支持跨域通信。
  5. 安全性高：可以通过SSL/TLS协议实现加密通信 。

WebSocket的应用场景广泛，例如：

  • 实时通信：如在线聊天、实时游戏等。
  • 数据推送：服务器端可以主动向客户端推送数据，如股票行情、天气预报等。
  • 实时监控：如视频监控、设备状态监控等 。

使用WebSocket技术时，需要先创建WebSocket对象，然后通过该对象与服务器进行通信。WebSocket对象的常用方法包括：

  • open()：打开WebSocket连接。
  • send()：向服务器发送数据。
  • close()：关闭WebSocket连接 。

WebSocket与HTTP协议相比，具有以下优势：

  • 构建速度快：使用类似浏览器工作方式的模块机制，大大加速了构建速度。
  • 构建结果小：仅编译改动的模块，打包结果更小。
  • 开发调试快：支持实时增量重新编译，快速响应保存的修改。
  • 配置少：基于ES modules，支持现代浏览器特性，配置简单。
  • 易于集成：支持Vue、React等主流前端框架，并提供原生SSR功能。

在线聊天案例

接下来，V哥基于WebSocket，创建一个在线聊天功能的案例，方便用更好的理解 WebSocket 的应用，以下代码会涉及到前端和后端的编写。来开干：

步骤1：设置后端WebSocket服务器

我们可以使用Node.js和ws库来创建WebSocket服务器。

  1. 初始化Node.js项目并安装ws库：
bash 复制代码 
   mkdir websocket-chat
   cd websocket-chat
   npm init -y
   npm install ws
  1. 创建server.js文件并编写WebSocket服务器代码：
javascript 复制代码 
   const WebSocket = require('ws');
   const wss = new WebSocket.Server({ port: 8080 });

   const clients = new Set();

   wss.on('connection', function connection(ws) {
     clients.add(ws);

     ws.on('message', function incoming(message) {
       console.log('received: %s', message);
       clients.forEach(client => {
         if (client !== ws && client.readyState === WebSocket.OPEN) {
           client.send(message);
         }
       });
     });

     ws.on('close', () => {
       clients.delete(ws);
     });
   });

   console.log('WebSocket server started on ws://localhost:8080');

步骤2：创建前端页面

  1. 在项目根目录下创建index.html文件：
html 复制代码 
   <!DOCTYPE html>
   <html lang="en">
   <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>WebSocket Chat</title>
   </head>
   <body>
     <h1>WebSocket Chat</h1>
     <input type="text" id="messageInput" placeholder="Type a message...">
     <button id="sendButton">Send</button>
     <ul id="messagesList"></ul>

     <script src="chat.js"></script>
   </body>
   </html>
  1. 创建chat.js文件并编写前端逻辑：
javascript 复制代码 
   const ws = new WebSocket('ws://localhost:8080');

   const messageInput = document.getElementById('messageInput');
   const sendButton = document.getElementById('sendButton');
   const messagesList = document.getElementById('messagesList');

   sendButton.addEventListener('click', () => {
     const message = messageInput.value;
     if (message) {
       ws.send(message);
       messageInput.value = '';
     }
   });

   ws.onmessage = (event) => {
     const messageItem = document.createElement('li');
     messageItem.textContent = event.data;
     messagesList.appendChild(messageItem);
   };

   ws.onopen = () => {
     console.log('Connected to the WebSocket server.');
   };

   ws.onclose = () => {
     console.log('Disconnected from the WebSocket server.');
   };

   ws.onerror = (error) => {
     console.error('WebSocket error:', error);
   };

步骤3：运行WebSocket服务器和前端页面

  1. 启动WebSocket服务器：
bash 复制代码 
   node server.js
  1. 打开浏览器并访问file:///path/to/websocket-chat/index.html，替换/path/to/websocket-chat/为你的项目路径。

步骤解析：

  • 服务器端 ：创建了一个WebSocket服务器，监听8080端口。每当有新连接时，它会将客户端添加到clients集合中。当收到消息时，服务器会将消息广播给所有其他客户端。
  • 客户端：在浏览器中创建了一个WebSocket连接。用户输入消息并点击发送按钮时，消息通过WebSocket发送到服务器。客户端还监听服务器发回的消息，并将其显示在消息列表中。

天气预报案例

创建一个基于WebSocket的数据推送天气预报功能，下面 V 哥通过一个案例来演示一下，其中包括一个后端服务器，负责推送天气更新，以及一个前端页面，用于显示实时天气信息。以下是详细的步骤说明和代码解析：

步骤1：设置后端WebSocket服务器

使用Node.js和ws库创建WebSocket服务器。

  1. 初始化Node.js项目并安装所需库：
bash 复制代码 
   mkdir weather-websocket
   cd weather-websocket
   npm init -y
   npm install ws
  1. 创建server.js文件并编写WebSocket服务器代码：
javascript 复制代码 
   const WebSocket = require('ws');
   const wss = new WebSocket.Server({ port: 8080 });

   const weatherData = {
     temperature: 22, // 假设温度
     condition: 'sunny' // 假设天气情况
   };

   // 定时更新天气数据，模拟实时数据源
   setInterval(() => {
     weatherData.temperature = Math.floor(Math.random() * 30); // 随机生成温度
     weatherData.condition = ['sunny', 'cloudy', 'rainy'][Math.floor(Math.random() * 3)];
     wss.clients.forEach(client => {
       if (client.readyState === WebSocket.OPEN) {
         client.send(JSON.stringify(weatherData));
       }
     });
   }, 5000); // 每5秒更新一次

   console.log('WebSocket server started on ws://localhost:8080');

步骤2：创建前端页面

  1. 在项目根目录下创建index.html文件：
html 复制代码 
   <!DOCTYPE html>
   <html lang="en">
   <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Weather Forecast</title>
   </head>
   <body>
     <h1>Live Weather Forecast</h1>
     <div>
       <p>Temperature: <span id="temperature">--</span>°C</p>
       <p>Condition: <span id="condition">--</span></p>
     </div>

     <script src="app.js"></script>
   </body>
   </html>
  1. 创建app.js文件并编写JavaScript代码来处理WebSocket连接和UI更新：
javascript 复制代码 
   const ws = new WebSocket('ws://localhost:8080');

   const temperatureDisplay = document.getElementById('temperature');
   const conditionDisplay = document.getElementById('condition');

   ws.onmessage = (event) => {
     const weather = JSON.parse(event.data);
     temperatureDisplay.textContent = weather.temperature;
     conditionDisplay.textContent = weather.condition;
   };

   ws.onopen = () => {
     console.log('Connected to the weather WebSocket server.');
   };

   ws.onclose = () => {
     console.log('Disconnected from the weather WebSocket server.');
   };

   ws.onerror = (error) => {
     console.error('WebSocket error:', error);
   };

步骤3：运行WebSocket服务器和前端页面

  1. 启动WebSocket服务器：
bash 复制代码 
   node server.js
  1. 在浏览器中打开file:///path/to/weather-websocket/index.html，替换/path/to/weather-websocket/为你的项目路径。

步骤解析：

  • 服务器端 ：创建了一个WebSocket服务器，监听8080端口。服务器端使用setInterval函数每5秒更新一次天气数据，并将更新推送给所有连接的客户端。
  • 客户端：在浏览器中创建了一个WebSocket连接。客户端监听服务器发送的消息，并更新页面上的温度和天气状况。

注意哦，在实际应用中，天气数据可能来自外部API，如果需要可以在聚合数据上找到，并且需要对数据进行身份验证和加密等安全措施。

最后

WebSocket是一种强大的通信技术，适用于需要实时通信和高交互性的应用场景。掌握利用WebSocket技术，是前端开发的必备技能。欢迎关注威哥爱编程，一起交流学习，不喜勿喷哦。

相关推荐
秋夫人6 分钟前
http cache-control
网络·网络协议·http
不灭锦鲤2 小时前
ssrf学习（ctfhub靶场）
网络·学习·安全
weixin_548444262 小时前
2024年最新版本神马TV8.5影视APP源码 293TV影视点播系统源码搭建教程 神马TV8.2加强版反编译教程 保姆级小白可搭建 完整版本视频教程
网络
网络研究院5 小时前
如何安全地大规模部署 GenAI 应用程序
网络·人工智能·安全·ai·部署·观点
limengshi1383925 小时前
通信工程学习：什么是RIP路由信息协议
网络·网络协议·学习·智能路由器·信息与通信
GodK7775 小时前
HTTPS 的加密流程
网络协议·http·https
limengshi1383929 小时前
通信工程学习：什么是TFTP简单文件传输协议
网络·网络协议·学习·信息与通信
麻辣韭菜11 小时前
网络基础 【HTTP】
网络·c++·http
Deryck_德瑞克12 小时前
Java网络通信—TCP
java·网络·tcp/ip
GodK77712 小时前
IP 数据包分包组包
服务器·网络·tcp/ip
热门推荐
01组基轨迹建模 GBTM的介绍与实现（Stata 或 R）02【经验分享】Ubuntu22.04安装微信(linux官方版)032024年高教社杯数学建模国赛C题超详细解题思路分析04分享几个惊艳的 Three.js 个人站点05安卓系列机型永久去除data分区加密 详细步骤解析06【2024数模国赛赛题思路公开】国赛B题思路丨附可运行代码丨无偿自提07springer 在线投稿编译踩坑08Ubuntu24.04安装中文输入法09【2024高教社杯全国大学生数学建模竞赛】B题 生产过程中的决策问题——解题思路 代码 论文10CTF网络安全大赛简单的web抓包题目：HEADache