正文

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

/0 浏览量
0517

了解WebSocket

WebSocket是一种在单个TCP连接上进行全双工通信的协议。与HTTP协议不同，WebSocket允许服务器主动推送信息给客户端。它通常用于构建实时、交互式Web应用程序，例如在线游戏、实时聊天和股票交易平台。

为什么选择WebSocket？

相较于轮询（Polling）、长轮询（Long Polling）和服务器发送事件（Server-Sent Events，SSE），WebSocket提供了以下优势：

  • 低延迟：WebSocket允许服务器和客户端之间实时通信，无需频繁请求和等待响应。
  • 全双工通信：服务器和客户端可以同时发送和接收数据，而无需等待对方先发送数据。
  • 开销小：WebSocket仅使用单个连接即可实现实时通信，降低了开销。

环境搭建

  1. 服务器端：可以选择Node.js、Java、Python等后端语言实现WebSocket服务器。以下以Node.js为例。
# 安装WebSocket模块
npm install 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);
  });

  ws.send('something from server');
});
  1. 客户端：可以使用HTML5的WebSocket API实现客户端。
<!DOCTYPE html>
<html>
<head>
  <title>WebSocket客户端</title>
</head>
<body>
  <h1>WebSocket客户端</h1>
  <button id="send">发送消息</button>
  <script>
    const ws = new WebSocket('ws://localhost:8080');

    ws.onopen = function() {
      console.log('连接成功');
    };

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

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

    document.getElementById('send').onclick = function() {
      ws.send('Hello, WebSocket!');
    };
  </script>
</body>
</html>

实现实时数据交互

以下是一个简单的示例，展示如何使用WebSocket实现实时股票价格显示。

  1. 服务器端：
// 模拟股票价格数据
const stockPrice = {
  'AAPL': 150,
  'GOOGL': 2800,
  'MSFT': 280
};

// 设置定时任务，每隔一秒更新股票价格
setInterval(() => {
  for (const [key, value] of Object.entries(stockPrice)) {
    stockPrice[key] = Math.floor(Math.random() * 5000) + 100; // 生成100-5000之间的随机股票价格
  }
}, 1000);

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

  ws.send(JSON.stringify(stockPrice)); // 发送实时股票价格数据
});
  1. 客户端：
const ws = new WebSocket('ws://localhost:8080');

ws.onmessage = function(event) {
  const stockPrice = JSON.parse(event.data);
  console.log('实时股票价格：');
  for (const [key, value] of Object.entries(stockPrice)) {
    console.log(`${key}: ${value}`);
  }
};

通过以上步骤，您可以轻松实现实时数据交互。当然，WebSocket在实际应用中还有更多高级用法，如消息订阅、数据压缩、心跳机制等，这里只是简单入门教程，希望能对您有所帮助。

-- 展开阅读全文 --