WebSocket 的使用

最新推荐文章于 2024-07-11 20:16:12 发布

始终坚持在保安岗位

最新推荐文章于 2024-07-11 20:16:12 发布

阅读量763

点赞数 9

文章标签： websocket 网络协议网络

本文链接：https://blog.csdn.net/weixin_51391923/article/details/136232771

版权

当使用 WebSocket 进行实时通信时，通常涉及以下几个主要步骤：

建立连接：
- 在客户端，通过 JavaScript 中的 WebSocket 对象创建一个 WebSocket 实例，并指定要连接的 WebSocket 服务器的 URL。
- 在服务器端，需要创建 WebSocket 服务监听指定的端口，并等待客户端的连接请求。
连接事件处理：
- 在客户端，可以监听 WebSocket 的 onopen 事件，当连接建立成功时执行相应的操作。
- 在服务器端，通过监听 connection 事件处理客户端的连接请求，并执行相应的操作。
消息传输：
- 客户端和服务器端都可以通过 send() 方法向对方发送消息。
- 在客户端，可以监听 WebSocket 的 onmessage 事件来接收服务器发送的消息。
- 在服务器端，可以监听客户端发送的消息，并根据需要进行处理和回复。
错误处理和连接关闭：
- 客户端和服务器端都可以监听 WebSocket 的 onerror 事件来处理连接错误。
- 客户端和服务器端可以监听 WebSocket 的 onclose 事件来处理连接关闭的情况。
安全性考虑：
- 当使用 WebSocket 进行通信时，需要特别注意安全性，避免出现跨站脚本攻击（XSS）等安全漏洞。可以通过一些安全措施来保护 WebSocket 连接的安全性。

服务器端代码（Node.js）：

// 引入 WebSocket 模块
const WebSocket = require('ws');

// 创建 WebSocket 服务器
const wss = new WebSocket.Server({ port: 8080 });

// 监听客户端连接请求
wss.on('connection', function connection(ws, req) {
  // 打印客户端连接信息
  console.log(`客户端 ${req.socket.remoteAddress} 已连接`);

  // 监听客户端发送的消息
  ws.on('message', function incoming(message) {
    console.log(`接收到客户端[${req.socket.remoteAddress}]的消息：${message}`);

    // 向客户端回复消息
    ws.send(`服务器已接收到你的消息：${message}`);
  });

  // 监听客户端连接关闭事件
  ws.on('close', function() {
    console.log(`客户端 ${req.socket.remoteAddress} 已断开连接`);
  });
});

以上代码使用 Node.js 的 ws 模块创建了一个 WebSocket 服务器，监听端口号为 8080，当客户端连接成功后，打印客户端连接信息，并监听客户端发送的消息和连接关闭事件。当接收到客户端发送的消息时，将消息打印在控制台，并回复一条消息给客户端。

客户端代码（HTML + JavaScript）：

<!-- 客户端代码 -->
<!DOCTYPE html>
<html>
<head>
  <title>WebSocket 示例</title>
</head>
<body>
  <input type="text" id="input">
  <button type="button" onclick="sendMessage()">发送消息</button>
  <div id="output"></div>
  <script>
    var ws = new WebSocket("ws://localhost:8080");

    // 连接成功时的回调函数
    ws.onopen = function(event) {
      console.log("WebSocket 已连接");
    };

    // 接收到消息时的回调函数
    ws.onmessage = function(event) {
      console.log("接收到消息：" + event.data);
      var output = document.getElementById("output");
      output.innerHTML += "<p>收到消息：" + event.data + "</p>";
    };

    // 连接关闭时的回调函数
    ws.onclose = function(event) {
      console.log("WebSocket 已关闭");
    };

    // 发送消息
    function sendMessage() {
      var input = document.getElementById("input");
      var output = document.getElementById("output");
      var message = input.value;
      ws.send(message);
      output.innerHTML += "<p>发送消息：" + message + "</p>";
      input.value = "";
    }
  </script>
</body>
</html>

以上代码创建了一个包含文本输入框和按钮的 HTML 页面，当用户点击按钮时，将文本框中的内容作为消息发送给 WebSocket 服务器，并将消息显示在输出区域中。同时，客户端还监听了 WebSocket 的连接成功、接收到消息和连接关闭事件，分别在控制台和页面输出相关信息。