• WebSocket 初体验：构建实时通信应用

    WebSocket是一种在客户端和服务器之间建立持久连接的协议，它允许双方进行双向通信，从而实现低延迟的数据交换。WebSocket非常适合需要实时交互的应用场景，比如聊天应用、在线游戏、实时数据分析等。

    WebSocket简介

    什么是WebSocket？

    WebSocket是一种网络通信协议，它提供了一个全双工的通信通道，允许客户端和服务器端通过TCP连接直接进行数据交换。与HTTP协议不同的是，WebSocket在连接建立之后可以持续不断地发送和接收数据，而不是每次请求都需要重新建立连接。

    WebSocket的优势

    • 低延迟：由于WebSocket建立了一条持久的连接，所以数据传输速度更快。
    • 双向通信：客户端和服务器都可以主动发送数据。
    • 减少服务器负担：不需要频繁地建立和关闭连接，减少了资源消耗。
    • 更好的用户体验：实时数据更新提高了用户体验。

    WebSocket的应用场景

    • 实时聊天：即时消息传递。
    • 在线游戏：玩家间的实时互动。
    • 股票行情：实时推送股票价格变动。
    • 协作编辑：多人同时编辑文档。
    • 物联网(IoT)：设备之间的实时通信。

    实现WebSocket通信

    1. 客户端

    JavaScript API

    在客户端，可以通过简单的JavaScript API来创建WebSocket连接。

    示例代码

    javascript

    深色版本

    1. 1// 创建WebSocket连接
    2. 2const socket = new WebSocket('ws://example.com/ws');
    3. 3
    4. 4// 连接打开时触发
    5. 5socket.addEventListener('open', function (event) {
    6. 6  console.log('Connection opened');
    7. 7});
    8. 8
    9. 9// 接收消息时触发
    10. 10socket.addEventListener('message', function (event) {
    11. 11  console.log('Message received:', event.data);
    12. 12});
    13. 13
    14. 14// 连接关闭时触发
    15. 15socket.addEventListener('close', function (event) {
    16. 16  console.log('Connection closed');
    17. 17});
    18. 18
    19. 19// 发送消息
    20. 20socket.send('Hello from client!');

    2. 服务器端

    Node.js + WebSocket库

    在Node.js环境中，可以使用ws库来轻松创建WebSocket服务器。

    安装ws库

    bash

    深色版本

    1npm install ws
    示例代码

    javascript

    深色版本

    1. 1const WebSocket = require('ws');
    2. 2
    3. 3// 创建WebSocket服务器
    4. 4const server = new WebSocket.Server({ port: 8080 });
    5. 5
    6. 6server.on('connection', function connection(ws) {
    7. 7  console.log('Client connected');
    8. 8
    9. 9  // 当收到客户端的消息时
    10. 10  ws.on('message', function incoming(message) {
    11. 11    console.log('received: %s', message);
    12. 12
    13. 13    // 向客户端发送消息
    14. 14    ws.send(`Echo: ${message}`);
    15. 15  });
    16. 16
    17. 17  // 当连接关闭时
    18. 18  ws.on('close', function close() {
    19. 19    console.log('Client disconnected');
    20. 20  });
    21. 21});

    实战案例：简单聊天应用

    我们将构建一个简单的聊天应用，演示如何使用WebSocket实现实时通信。

    1. 准备工作

    • 安装Node.js和npm。
    • 创建一个新的项目文件夹。
    • 初始化项目并安装依赖。
      bash

      深色版本

      1. 1npm init -y
      2. 2npm install express ws

    2. 创建服务器端

    创建一个名为server.js的文件，用于设置WebSocket服务器。

    javascript

    深色版本

    1. 1const express = require('express');
    2. 2const WebSocket = require('ws');
    3. 3
    4. 4const app = express();
    5. 5const server = require('http').createServer(app);
    6. 6const wss = new WebSocket.Server({ server });
    7. 7
    8. 8wss.on('connection', function connection(ws) {
    9. 9  console.log('Client connected');
    10. 10
    11. 11  ws.on('message', function incoming(message) {
    12. 12    console.log('received: %s', message);
    13. 13    wss.clients.forEach(function each(client) {
    14. 14      if (client !== ws && client.readyState === WebSocket.OPEN) {
    15. 15        client.send(message);
    16. 16      }
    17. 17    });
    18. 18  });
    19. 19
    20. 20  ws.on('close', function close() {
    21. 21    console.log('Client disconnected');
    22. 22  });
    23. 23});
    24. 24
    25. 25app.use(express.static('public'));
    26. 26
    27. 27server.listen(3000, function listening() {
    28. 28  console.log('Listening on %d', server.address().port);
    29. 29});

    3. 创建客户端

    在项目的public文件夹中创建一个名为index.html的文件，用于展示聊天界面。

    html

    深色版本

    1. 1<!DOCTYPE html>
    2. 2<html lang="en">
    3. 3<head>
    4. 4  <meta charset="UTF-8">
    5. 5  <title>WebSocket Chat</title>
    6. 6  <style>
    7. 7    body { font-family: Arial, sans-serif; }
    8. 8    #chat { height: 300px; overflow-y: scroll; border: 1px solid #ccc; padding: 10px; }
    9. 9    input[type=text], button { margin-top: 10px; }
    10. 10  </style>
    11. 11</head>
    12. 12<body>
    13. 13  <div id="chat"></div>
    14. 14  <input type="text" id="input" placeholder="Type a message...">
    15. 15  <button onclick="sendMessage()">Send</button>
    16. 16
    17. 17  <script>
    18. 18    const chatBox = document.getElementById('chat');
    19. 19    const inputField = document.getElementById('input');
    20. 20
    21. 21    // 创建WebSocket连接
    22. 22    const socket = new WebSocket('ws://localhost:3000/ws');
    23. 23
    24. 24    // 连接打开时触发
    25. 25    socket.addEventListener('open', function (event) {
    26. 26      console.log('Connection opened');
    27. 27    });
    28. 28
    29. 29    // 接收消息时触发
    30. 30    socket.addEventListener('message', function (event) {
    31. 31      const message = event.data;
    32. 32      const messageElement = document.createElement('p');
    33. 33      messageElement.textContent = message;
    34. 34      chatBox.appendChild(messageElement);
    35. 35      chatBox.scrollTop = chatBox.scrollHeight;
    36. 36    });
    37. 37
    38. 38    // 发送消息
    39. 39    function sendMessage() {
    40. 40      const message = inputField.value;
    41. 41      if (message.trim()) {
    42. 42        socket.send(message);
    43. 43        inputField.value = '';
    44. 44      }
    45. 45    }
    46. 46
    47. 47    // 连接关闭时触发
    48. 48    socket.addEventListener('close', function (event) {
    49. 49      console.log('Connection closed');
    50. 50    });
    51. 51  </script>
    52. 52</body>
    53. 53</html>

    4. 运行应用

    • 在终端中运行node server.js启动服务器。
    • 打开浏览器，访问http://localhost:3000。

    现在，你可以在不同的浏览器窗口或标签页中打开聊天应用，并尝试发送消息，观察消息是否能够在客户端之间实时传输。

    总结

    通过以上步骤，你已经学会了如何使用WebSocket构建一个简单的聊天应用。WebSocket提供了强大的实时通信能力，使得开发者可以轻松地构建各种实时应用。随着对WebSocket的深入了解，你可以尝试更复杂的应用场景和技术挑战。

  • 相关阅读:
    百面深度学习-图神经网络
    30. UE5 RPG GamplayAbility的配置项
    品牌化战略：跨境电商市场突破的关键
    从零搭建react+ts组件库（封装antd）
    数字化转型加快，低代码平台优势凸显
    Android Camera2获取摄像头的视场角（FOV）信息
    第十四章《多线程》第8节：线程池
    请回答数据结构【布隆过滤器&位图】
    echarts让设置legend宽度不生效
    神经网络需要的数学知识,神经网络的数学基础
  • 原文地址：https://blog.csdn.net/qq_42072014/article/details/140996889