正文

HTML5 WebSocket 实战指南：轻松实现实时数据交互的5个实用示例

/0 浏览量
0402

引言

在互联网时代，实时数据交互已成为许多应用的核心功能。HTML5 WebSocket 提供了一种在单个 TCP 连接上进行全双工通信的机制，使得服务器和客户端能够实时地交换数据。本文将为你提供5个实用的 HTML5 WebSocket 示例，帮助你轻松实现实时数据交互。

示例一：简单的聊天室

1.1 简介

本示例将创建一个简单的聊天室，用户可以在其中发送和接收消息。

1.2 代码示例

以下是一个简单的 HTML5 WebSocket 聊天室的实现：

<!DOCTYPE html>
<html>
<head>
    <title>简单聊天室</title>
</head>
<body>
    <input type="text" id="message" placeholder="输入消息">
    <button onclick="sendMessage()">发送</button>
    <div id="chat"></div>

    <script>
        var socket = new WebSocket('ws://localhost:8080');
        socket.onmessage = function(event) {
            var chat = document.getElementById('chat');
            chat.innerHTML += '<p>' + event.data + '</p>';
        };

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

1.3 服务器端代码（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);
            }
        });
    });
});

示例二：实时股票行情

2.1 简介

本示例将展示如何使用 HTML5 WebSocket 实现实时股票行情。

2.2 代码示例

以下是一个简单的实时股票行情的实现：

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

    <script>
        var socket = new WebSocket('ws://localhost:8080');
        socket.onmessage = function(event) {
            var stock = document.getElementById('stock');
            stock.innerHTML = '股票价格：' + event.data;
        };
    </script>
</body>
</html>

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

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

// 模拟股票价格变化
setInterval(() => {
    var price = Math.floor(Math.random() * 100) + 1;
    wss.clients.forEach(function each(client) {
        if (client.readyState === WebSocket.OPEN) {
            client.send(price);
        }
    });
}, 1000);

示例三：在线多人游戏

3.1 简介

本示例将展示如何使用 HTML5 WebSocket 实现在线多人游戏。

3.2 代码示例

以下是一个简单的在线多人游戏实现：

<!DOCTYPE html>
<html>
<head>
    <title>在线多人游戏</title>
</head>
<body>
    <canvas id="game" width="400" height="400"></canvas>

    <script>
        var socket = new WebSocket('ws://localhost:8080');
        var canvas = document.getElementById('game');
        var ctx = canvas.getContext('2d');

        socket.onmessage = function(event) {
            var data = JSON.parse(event.data);
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            ctx.fillStyle = 'red';
            ctx.fillRect(data.x, data.y, 10, 10);
        };
    </script>
</body>
</html>

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

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

var players = [];

wss.on('connection', function connection(ws) {
    var player = {
        x: Math.floor(Math.random() * 400),
        y: Math.floor(Math.random() * 400)
    };
    players.push(player);

    ws.on('message', function incoming(message) {
        var data = JSON.parse(message);
        players.forEach(function(player) {
            if (player !== ws) {
                player.x = data.x;
                player.y = data.y;
            }
        });
    });
});

setInterval(() => {
    wss.clients.forEach(function each(client) {
        if (client.readyState === WebSocket.OPEN) {
            var data = players.map(player => ({
                x: player.x,
                y: player.y
            }));
            client.send(JSON.stringify(data));
        }
    });
}, 1000);

示例四：实时位置跟踪

4.1 简介

本示例将展示如何使用 HTML5 WebSocket 实现实时位置跟踪。

4.2 代码示例

以下是一个简单的实时位置跟踪实现：

<!DOCTYPE html>
<html>
<head>
    <title>实时位置跟踪</title>
</head>
<body>
    <div id="map"></div>

    <script>
        var socket = new WebSocket('ws://localhost:8080');
        var map = document.getElementById('map');

        socket.onmessage = function(event) {
            var data = JSON.parse(event.data);
            var marker = document.createElement('div');
            marker.style.position = 'absolute';
            marker.style.left = data.x + 'px';
            marker.style.top = data.y + 'px';
            marker.style.width = '10px';
            marker.style.height = '10px';
            marker.style.backgroundColor = 'red';
            map.appendChild(marker);
        };
    </script>
</body>
</html>

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

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

// 模拟位置变化
setInterval(() => {
    var data = {
        x: Math.floor(Math.random() * 400),
        y: Math.floor(Math.random() * 400)
    };
    wss.clients.forEach(function each(client) {
        if (client.readyState === WebSocket.OPEN) {
            client.send(JSON.stringify(data));
        }
    });
}, 1000);

示例五：实时投票系统

5.1 简介

本示例将展示如何使用 HTML5 WebSocket 实现实时投票系统。

5.2 代码示例

以下是一个简单的实时投票系统实现：

<!DOCTYPE html>
<html>
<head>
    <title>实时投票系统</title>
</head>
<body>
    <div id="votes"></div>
    <button onclick="vote('A')">A</button>
    <button onclick="vote('B')">B</button>
    <button onclick="vote('C')">C</button>

    <script>
        var socket = new WebSocket('ws://localhost:8080');
        var votes = document.getElementById('votes');

        function vote(option) {
            socket.send(option);
        }

        socket.onmessage = function(event) {
            var data = JSON.parse(event.data);
            votes.innerHTML = 'A: ' + data.A + '<br>B: ' + data.B + '<br>C: ' + data.C;
        };
    </script>
</body>
</html>

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

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

var votes = {
    A: 0,
    B: 0,
    C: 0
};

wss.on('connection', function connection(ws) {
    ws.on('message', function incoming(message) {
        votes[message] += 1;
        wss.clients.forEach(function each(client) {
            if (client.readyState === WebSocket.OPEN) {
                client.send(JSON.stringify(votes));
            }
        });
    });
});

总结

通过以上5个示例，你学会了如何使用 HTML5 WebSocket 实现实时数据交互。在实际应用中，你可以根据需求进行扩展和优化。希望这些示例能够帮助你更好地理解和应用 HTML5 WebSocket。

-- 展开阅读全文 --