正文

从入门到实战：轻松掌握HTML5 WebSocket编程实例详解

/0 浏览量
0510

引言

在互联网高速发展的今天，实时通信已经成为许多应用场景的必备功能。HTML5 WebSocket协议作为一种全双工通信协议，能够实现服务器与客户端之间的实时数据交换。本文将带领大家从入门到实战，详细了解HTML5 WebSocket编程，并通过实例演示其应用。

HTML5 WebSocket简介

什么是WebSocket？

WebSocket是一种在单个TCP连接上进行全双工通信的协议。它允许服务器与客户端之间进行实时数据交换，而不需要轮询或长轮询等传统方法。

WebSocket的特点

  • 全双工通信：服务器和客户端可以同时发送和接收数据。
  • 低延迟：数据传输速度快，延迟低。
  • 高效性：不需要频繁建立和关闭连接。

HTML5 WebSocket编程入门

1. 创建WebSocket连接

在JavaScript中，可以使用new WebSocket(url)方法创建WebSocket连接。其中，url是WebSocket服务器的地址。

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

2. 监听WebSocket事件

WebSocket连接建立后，可以监听以下事件：

  • onopen：连接打开时触发。
  • onmessage：接收到服务器消息时触发。
  • onerror：连接出错时触发。
  • onclose：连接关闭时触发。
ws.onopen = function() {
  console.log('连接已打开');
};

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

ws.onerror = function(error) {
  console.log('连接出错：' + error);
};

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

3. 发送数据

可以通过ws.send(data)方法向服务器发送数据。

ws.send('Hello, WebSocket!');

HTML5 WebSocket实战案例

1. 实时聊天室

服务器端（Node.js）

const WebSocket = require('ws');

const wss = new WebSocket.Server({ port: 8080 });

wss.on('connection', function(ws) {
  ws.on('message', function(message) {
    console.log('收到消息：' + message);
    wss.clients.forEach(function(client) {
      if (client.readyState === WebSocket.OPEN) {
        client.send(message);
      }
    });
  });
});

客户端（HTML）

<!DOCTYPE html>
<html>
<head>
  <title>实时聊天室</title>
</head>
<body>
  <input type="text" id="message" placeholder="输入消息">
  <button onclick="sendMessage()">发送</button>
  <script>
    var ws = new WebSocket('ws://localhost:8080');

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

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

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

2. 实时股票行情

服务器端（Node.js）

const WebSocket = require('ws');
const express = require('express');
const app = express();

app.get('/stock', function(req, res) {
  res.setHeader('Content-Type', 'text/event-stream');
  res.setHeader('Cache-Control', 'no-cache');
  res.setHeader('Connection', 'keep-alive');

  const sendStockData = () => {
    const stockData = {
      symbol: 'AAPL',
      price: Math.random() * 100
    };
    res.write(`data: ${JSON.stringify(stockData)}\n\n`);
  };

  setInterval(sendStockData, 1000);

  req.on('close', function() {
    clearInterval(sendStockData);
  });
});

const wss = new WebSocket.Server({ port: 8080 });

wss.on('connection', function(ws) {
  ws.on('message', function(message) {
    console.log('收到消息：' + message);
  });
});

app.listen(3000, function() {
  console.log('服务器启动，监听端口3000');
});

客户端（HTML）

<!DOCTYPE html>
<html>
<head>
  <title>实时股票行情</title>
</head>
<body>
  <div id="stock"></div>
  <script>
    var ws = new WebSocket('ws://localhost:8080');

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

    ws.onmessage = function(event) {
      var stockData = JSON.parse(event.data);
      document.getElementById('stock').innerHTML = `股票：${stockData.symbol}，价格：${stockData.price}`;
    };
  </script>
</body>
</html>

总结

通过本文的学习，相信大家对HTML5 WebSocket编程有了更深入的了解。在实际应用中，WebSocket可以大大提高数据传输的效率和实时性。希望本文能帮助大家轻松掌握HTML5 WebSocket编程，并将其应用到实际项目中。

-- 展开阅读全文 --