正文

轻松上手：HTML5 WebSocket编程实战案例解析

/0 浏览量
0825

在互联网时代，实时通信的应用越来越广泛。HTML5 WebSocket 提供了一种在单个 TCP 连接上进行全双工通讯的协议，这使得服务器和客户端之间可以实时交换数据。本文将通过一个实战案例，带你轻松上手 HTML5 WebSocket 编程。

一、WebSocket 基础知识

1.1 什么是 WebSocket？

WebSocket 是一种网络通信协议，允许服务器和客户端之间进行全双工通信。它允许服务器主动推送数据到客户端，而不需要客户端不断轮询服务器。

1.2 WebSocket 与 HTTP 的区别

  • 建立连接方式：HTTP 需要通过多次握手建立连接，而 WebSocket 只需要一次握手即可建立连接。
  • 数据传输方式：HTTP 是请求-响应模式，而 WebSocket 是全双工通信。
  • 数据传输格式：HTTP 通常使用文本或二进制数据，而 WebSocket 可以传输任何格式的数据。

二、实战案例：实现一个简单的聊天室

2.1 项目结构

  • client.html：前端页面，用于显示聊天内容，并接收和发送消息。
  • server.js：后端服务器，用于处理 WebSocket 连接和消息。

2.2 客户端代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>WebSocket 聊天室</title>
</head>
<body>
    <div id="chat-room">
        <ul id="messages"></ul>
        <input id="input" autocomplete="off">
        <button id="send">发送</button>
    </div>

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

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

        socket.onmessage = function(event) {
            var data = JSON.parse(event.data);
            var message = `<li>${data.username}: ${data.message}</li>`;
            document.getElementById('messages').innerHTML += message;
        };

        document.getElementById('send').onclick = function() {
            var input = document.getElementById('input');
            var message = {
                username: '用户',
                message: input.value
            };
            socket.send(JSON.stringify(message));
            input.value = '';
        };
    </script>
</body>
</html>

2.3 服务器代码

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('收到消息:', message);

        wss.clients.forEach(function each(client) {
            if (client.readyState === WebSocket.OPEN) {
                client.send(message);
            }
        });
    });
});

三、总结

通过以上实战案例，你学会了如何使用 HTML5 WebSocket 实现一个简单的聊天室。在实际项目中，你可以根据需求扩展功能，例如添加用户身份验证、消息加密等。希望本文能帮助你轻松上手 HTML5 WebSocket 编程。

-- 展开阅读全文 --