正文

揭秘HTML5 WebSocket：实时通信的强大示例解析

/0 浏览量
0320

引言

HTML5 WebSocket 是一种在单个 TCP 连接上进行全双工通讯的协议。它允许服务器和客户端之间进行实时数据交换，无需轮询或长轮询等传统方法。本文将深入解析 HTML5 WebSocket 的工作原理，并通过一个示例来展示其强大功能。

HTML5 WebSocket 的工作原理

1. 连接建立

WebSocket 连接是通过 HTTP 协议发起的，客户端发送一个特殊的 HTTP 请求，服务器响应后，双方建立 WebSocket 连接。

2. 数据传输

WebSocket 连接建立后，客户端和服务器可以随时发送和接收数据，无需等待请求响应。

3. 连接关闭

WebSocket 连接可以通过发送一个关闭帧来关闭，也可以在发生错误时自动关闭。

示例：使用 HTML5 WebSocket 实现实时聊天功能

1. 服务器端代码（Node.js + Express + ws 库）

const express = require('express');
const WebSocket = require('ws');
const app = express();
const wss = new WebSocket.Server({ port: 8080 });

wss.on('connection', function connection(ws) {
  ws.on('message', function incoming(message) {
    console.log('received: %s', message);
  });

  ws.send('something from server');
});

app.listen(8080, () => {
  console.log('Server is running on http://localhost:8080');
});

2. 客户端代码（HTML + JavaScript）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>WebSocket Chat</title>
</head>
<body>
  <input type="text" id="message" placeholder="Type a message...">
  <button onclick="sendMessage()">Send</button>
  <div id="chat"></div>

  <script>
    const ws = new WebSocket('ws://localhost:8080');

    ws.onopen = function() {
      console.log('Connected to server');
    };

    ws.onmessage = function(event) {
      const chat = document.getElementById('chat');
      chat.innerHTML += `<p>${event.data}</p>`;
    };

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

3. 运行示例

  1. 在终端运行服务器端代码：node server.js。
  2. 在浏览器中打开客户端代码，输入消息并点击发送按钮。

总结

HTML5 WebSocket 是一种强大的实时通信技术，可以实现服务器和客户端之间的全双工通讯。通过本文的示例，我们可以看到如何使用 HTML5 WebSocket 实现实时聊天功能。在实际应用中，WebSocket 可以应用于各种场景，如在线游戏、实时监控、实时数据分析等。

-- 展开阅读全文 --