正文

从入门到实战：HTML5 WebSocket通信实战案例解析

/0 浏览量
0607

什么是WebSocket？

WebSocket是一种网络通信协议，它提供了一种在单个TCP连接上进行全双工通信的方式。相比传统的HTTP协议，WebSocket允许服务器主动向客户端推送信息，而无需客户端轮询服务器。

HTML5 WebSocket通信入门

1. 创建WebSocket连接

首先，我们需要创建一个WebSocket连接。这可以通过JavaScript中的new WebSocket(url)来实现，其中url是WebSocket服务的URL。

var ws = new WebSocket('ws://example.com/socket');

2. 监听WebSocket事件

WebSocket提供了三个事件：open、message和close。我们可以通过监听这些事件来处理WebSocket的打开、接收消息和关闭操作。

ws.onopen = function(event) {
  console.log('连接已打开');
  // 发送消息
  ws.send('Hello, WebSocket!');
};

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

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

3. 关闭WebSocket连接

当不需要WebSocket连接时，我们可以调用close()方法来关闭连接。

ws.close();

WebSocket通信实战案例解析

1. 实时股票行情显示

在这个案例中，我们将创建一个WebSocket服务器，用于实时推送股票行情。客户端将订阅特定股票的行情，并实时显示在网页上。

服务器端（Node.js）

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);
  });

  ws.send('Welcome to stock market WebSocket server!');
});

客户端（HTML）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Stock Market WebSocket Client</title>
</head>
<body>
  <h1>Stock Market WebSocket Client</h1>
  <div id="stock-price"></div>
  <script>
    var ws = new WebSocket('ws://localhost:8080');

    ws.onopen = function() {
      console.log('连接已打开');
      ws.send('subscribe stock market');
    };

    ws.onmessage = function(event) {
      console.log('收到消息：' + event.data);
      var data = JSON.parse(event.data);
      document.getElementById('stock-price').innerHTML = 'Stock Price: ' + data.price;
    };

    ws.onclose = function() {
      console.log('连接已关闭');
    };
  </script>
</body>
</html>

2. 在线聊天室

在这个案例中，我们将创建一个简单的在线聊天室，允许用户实时发送和接收消息。

服务器端（Node.js）

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);
      }
    });
  });
});

客户端（HTML）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Chat Room WebSocket Client</title>
</head>
<body>
  <h1>Chat Room WebSocket Client</h1>
  <input type="text" id="message" placeholder="Type a message...">
  <button onclick="sendMessage()">Send</button>
  <div id="chat-log"></div>
  <script>
    var ws = new WebSocket('ws://localhost:8080');

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

    ws.onmessage = function(event) {
      console.log('收到消息：' + event.data);
      var chatLog = document.getElementById('chat-log');
      chatLog.innerHTML += event.data + '<br>';
    };

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

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

通过以上实战案例，我们可以了解到HTML5 WebSocket通信的强大功能和应用场景。在实际开发中，WebSocket可以应用于各种需要实时通信的场景，如实时股票行情、在线聊天室、多人在线游戏等。希望这些案例能够帮助你更好地理解HTML5 WebSocket通信。

-- 展开阅读全文 --