正文

HTML5 WebSocket快速入门：实战案例解析与代码示例

/0 浏览量
0331

引言

WebSocket是一种在单个TCP连接上进行全双工通信的协议。它允许服务器和客户端之间进行实时、双向的数据交换。HTML5提供了对WebSocket的原生支持，使得开发者可以轻松地实现实时通信应用。本文将带你入门WebSocket，通过实战案例解析和代码示例，让你快速掌握WebSocket的使用方法。

什么是WebSocket？

1. WebSocket协议

WebSocket协议是基于TCP协议的一种网络通信协议，它允许服务器和客户端之间建立一个持久的连接，并通过这个连接进行实时数据交换。

2. WebSocket的特点

  • 全双工通信：客户端和服务器可以同时发送和接收数据。
  • 持久连接：WebSocket连接一旦建立，就会保持打开状态，直到客户端或服务器主动关闭。
  • 轻量级：WebSocket协议比传统的HTTP协议更加轻量级，数据传输效率更高。

实战案例：WebSocket聊天室

下面我们将通过一个WebSocket聊天室的实战案例，来解析WebSocket的使用方法。

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 socket = new WebSocket('ws://localhost:8080');

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

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

        socket.onerror = function(event) {
            console.error('WebSocket连接发生错误');
        };

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

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

2. 后端代码（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);
            }
        });
    });
});

3. 运行聊天室

  1. 将前端代码保存为chat.html，后端代码保存为chat.js。
  2. 在终端中运行node chat.js启动WebSocket服务器。
  3. 打开浏览器，访问http://localhost:8080，即可看到聊天室界面。

总结

本文介绍了WebSocket的基本概念、特点以及实战案例。通过WebSocket，你可以轻松实现实时通信应用。希望本文能帮助你快速入门WebSocket，并在实际项目中发挥其作用。

-- 展开阅读全文 --