正文

HTML5 WebSocket入门：实战示例，轻松实现实时通信

/0 浏览量
0521

了解WebSocket

WebSocket是一种网络通信协议，它提供了一种在单个长连接上进行全双工通信的方式。与传统的HTTP协议不同，WebSocket允许服务器和客户端之间进行双向通信，而无需轮询或轮询请求。

WebSocket的基本原理

  1. 握手过程：WebSocket的建立是通过HTTP的握手请求完成的。客户端向服务器发送一个特殊的HTTP请求，请求服务器转换协议为WebSocket协议。如果服务器接受这个请求，它会响应一个特殊的HTTP响应，完成握手过程。
   // 客户端代码
   var ws = new WebSocket("ws://example.com/socketserver");

   // 服务器端代码（伪代码）
   if (request.method == 'GET' && request.url == '/socketserver') {
       // 发送转换协议为WebSocket协议的响应
   }
  1. 数据传输：WebSocket建立连接后，可以像TCP一样双向传输数据。数据传输是无状态的，即每次发送的数据都是独立的。
   // 客户端发送数据
   ws.send("Hello, WebSocket!");

   // 服务器接收数据
   ws.onmessage = function(event) {
       console.log("Received message: " + event.data);
   };

HTML5 WebSocket实战示例

以下是一个简单的WebSocket实战示例，实现一个简单的聊天室功能。

1. 服务器端代码

使用Node.js和ws库创建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: %s', message);
    wss.clients.forEach(function each(client) {
      if (client.readyState === WebSocket.OPEN) {
        client.send(message);
      }
    });
  });
});

2. 客户端代码

使用HTML和JavaScript创建WebSocket客户端。

<!DOCTYPE html>
<html>
<head>
  <title>Chat Room</title>
</head>
<body>
  <input type="text" id="messageInput" />
  <button onclick="sendMessage()">Send</button>
  <div id="messageLog"></div>

  <script>
    var ws = new WebSocket("ws://localhost:8080");

    ws.onopen = function() {
      console.log("WebSocket connection established.");
    };

    ws.onmessage = function(event) {
      var messageLog = document.getElementById("messageLog");
      messageLog.innerHTML += event.data + "\n";
    };

    function sendMessage() {
      var messageInput = document.getElementById("messageInput");
      var message = messageInput.value;
      ws.send(message);
      messageInput.value = "";
    }
  </script>
</body>
</html>

3. 运行示例

  1. 在终端中运行服务器端代码。
  2. 在浏览器中打开客户端HTML页面。
  3. 输入消息并发送，其他连接到WebSocket服务器的客户端将看到你发送的消息。

通过以上示例，你可以在实践中学习和掌握HTML5 WebSocket的用法。在实际开发中，WebSocket应用可以更加复杂，如实时游戏、在线协作工具等。希望这个入门教程能帮助你轻松实现实时通信！

-- 展开阅读全文 --