正文

HTML5 WebSocket实战教程：轻松实现实时通讯与数据交互案例解析

/0 浏览量
0920

引言

在互联网时代，实时通讯已经成为许多应用不可或缺的一部分。HTML5 WebSocket 提供了一种在单个 TCP 连接上进行全双工通讯的协议，使得服务器和客户端之间能够实时交换数据。本文将带你深入了解 HTML5 WebSocket 的原理，并通过实际案例解析，教你如何轻松实现实时通讯与数据交互。

一、HTML5 WebSocket 基础知识

1.1 什么是 WebSocket？

WebSocket 是一种网络通信协议，它允许服务器和客户端之间建立一个持久的连接，从而实现实时双向通信。与传统的 HTTP 请求相比，WebSocket 具有以下特点：

  • 全双工通信：服务器和客户端可以同时发送和接收数据。
  • 持久连接：一旦建立连接，除非客户端或服务器主动关闭，否则连接将一直保持。
  • 低延迟：由于连接始终打开，数据传输延迟更低。

1.2 WebSocket 协议

WebSocket 协议基于 TCP 协议，使用 80 端口进行通信。它通过以下步骤建立连接：

  1. 握手：客户端向服务器发送一个特殊的 HTTP 请求，请求升级到 WebSocket 协议。
  2. 服务器响应：服务器接收客户端的请求，并响应一个特殊的 HTTP 响应，同意升级到 WebSocket 协议。
  3. 建立连接：客户端和服务器通过握手成功后，建立 WebSocket 连接。

二、HTML5 WebSocket 实战案例

2.1 案例一：实时聊天室

2.1.1 客户端代码

<!DOCTYPE html>
<html>
<head>
    <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('WebSocket 连接已建立');
        };

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

        ws.onerror = function(error) {
            console.error('WebSocket 错误：', error);
        };

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

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

2.1.2 服务器端代码（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) {
            client.send(message);
        });
    });
});

2.2 案例二：实时股票行情

2.2.1 客户端代码

<!DOCTYPE html>
<html>
<head>
    <title>WebSocket 股票行情</title>
</head>
<body>
    <div id="stock"></div>

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

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

        ws.onmessage = function(event) {
            var stock = document.getElementById('stock');
            stock.innerHTML += '<p>' + event.data + '</p>';
        };

        ws.onerror = function(error) {
            console.error('WebSocket 错误：', error);
        };

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

2.2.2 服务器端代码（Node.js）

const WebSocket = require('ws');
const http = require('http');

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

const server = http.createServer((req, res) => {
    if (req.url === '/stock') {
        res.writeHead(200, { 'Content-Type': 'text/plain' });
        res.end('WebSocket 股票行情');
    }
});

server.listen(8080);

wss.on('connection', function(ws) {
    ws.on('message', function(message) {
        console.log('收到消息：', message);
        wss.clients.forEach(function(client) {
            client.send('股票行情更新：' + message);
        });
    });
});

三、总结

通过本文的介绍，相信你已经对 HTML5 WebSocket 有了一定的了解。在实际应用中，WebSocket 可以帮助我们实现各种实时通讯功能，如聊天室、股票行情、在线游戏等。希望本文能帮助你轻松实现实时通讯与数据交互。

-- 展开阅读全文 --