正文

HTML5 WebSocket入门：实战案例教你轻松实现实时数据交互

/0 浏览量
0726

了解WebSocket

WebSocket 是一种在单个 TCP 连接上进行全双工通讯的协议。它提供了一种在单个连接上双向通信的方法，使得服务器和客户端可以在任何时候开始发送消息。相比传统的 HTTP 请求，WebSocket 具有低延迟和高效传输的特点，非常适合实现实时数据交互。

WebSocket的工作原理

WebSocket 通过握手建立连接。客户端向服务器发送一个特殊的 HTTP 请求，服务器响应后，双方就建立了一个持久的连接。一旦连接建立，双方就可以在任何时候发送消息，而不需要再次建立连接。

// 客户端代码示例
var ws = new WebSocket('ws://localhost:8080');

ws.onopen = function(event) {
  console.log('连接已建立');
};

ws.onmessage = function(event) {
  console.log('收到消息:', event.data);
};

ws.onerror = function(event) {
  console.log('WebSocket 错误:', event);
};

ws.onclose = function(event) {
  console.log('连接已关闭');
};

实战案例：实时聊天应用

下面我们将通过一个简单的实时聊天应用来演示如何使用 WebSocket。

1. 服务器端

首先，我们需要一个 WebSocket 服务器。这里我们使用 Node.js 和 ws 库来实现。

// 服务器端代码示例
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('收到:', message);
    wss.clients.forEach(function each(client) {
      if (client.readyState === WebSocket.OPEN) {
        client.send(message);
      }
    });
  });
});

2. 客户端

接下来，我们来实现客户端代码。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>WebSocket 聊天应用</title>
</head>
<body>
  <input type="text" id="message" placeholder="输入消息">
  <button onclick="sendMessage()">发送</button>
  <div id="chat"></div>

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

    ws.onopen = function() {
      console.log('连接已建立');
    };

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

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

总结

通过本篇文章，我们学习了 WebSocket 的基本概念、工作原理和实战案例。WebSocket 使得实时数据交互变得更加简单，非常适合实现各种需要实时更新内容的应用。希望这篇文章能帮助你更好地理解 WebSocket，并应用到实际项目中。

-- 展开阅读全文 --