正文

HTML5 WebSocket入门：轻松实现实时通信的5个实用示例

/0 浏览量
0909

在互联网高速发展的今天，实时通信已经成为许多应用的核心功能。HTML5 WebSocket协议提供了一种在单个TCP连接上进行全双工通信的方式，它允许服务器和客户端之间进行实时数据交换。本文将带你入门HTML5 WebSocket，并通过5个实用示例教你如何实现实时通信。

示例1：简单的WebSocket聊天室

前端代码

<!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('连接成功');
        };

        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('连接关闭');
        };

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

后端代码（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：WebSocket实时股票信息

前端代码

<!DOCTYPE html>
<html>
<head>
    <title>WebSocket实时股票信息</title>
</head>
<body>
    <div id="stock"></div>

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

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

        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('连接关闭');
        };
    </script>
</body>
</html>

后端代码（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('股票信息：' + message);
    });
});

示例3：WebSocket实时天气信息

前端代码

<!DOCTYPE html>
<html>
<head>
    <title>WebSocket实时天气信息</title>
</head>
<body>
    <div id="weather"></div>

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

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

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

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

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

后端代码（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('天气信息：' + message);
    });
});

示例4：WebSocket实时游戏

前端代码

<!DOCTYPE html>
<html>
<head>
    <title>WebSocket实时游戏</title>
</head>
<body>
    <canvas id="game" width="500" height="500"></canvas>

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

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

        ws.onmessage = function(event) {
            var data = JSON.parse(event.data);
            var game = document.getElementById('game');
            var ctx = game.getContext('2d');
            ctx.clearRect(0, 0, game.width, game.height);
            ctx.fillStyle = 'red';
            ctx.fillRect(data.x, data.y, 10, 10);
        };

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

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

后端代码（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);
        var data = JSON.stringify({ x: Math.random() * 500, y: Math.random() * 500 });
        wss.clients.forEach(function each(client) {
            if (client.readyState === WebSocket.OPEN) {
                client.send(data);
            }
        });
    });
});

示例5：WebSocket实时监控

前端代码

<!DOCTYPE html>
<html>
<head>
    <title>WebSocket实时监控</title>
</head>
<body>
    <div id="monitor"></div>

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

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

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

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

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

后端代码（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);
        var data = '监控数据：' + message;
        wss.clients.forEach(function each(client) {
            if (client.readyState === WebSocket.OPEN) {
                client.send(data);
            }
        });
    });
});

通过以上5个示例，相信你已经对HTML5 WebSocket有了初步的了解。在实际应用中，你可以根据自己的需求进行扩展和修改。希望这篇文章能帮助你轻松实现实时通信功能。

-- 展开阅读全文 --