WebSocket实战：让网页“活”起来！

❤ 写在前面

如果觉得对你有帮助的话，点个小❤❤ 吧，你的支持是对我最大的鼓励~

个人独立开发wx小程序，感谢支持！

你是否曾经在网页聊天室中看到消息瞬间出现，或者在股票网站上看到股价实时跳动，却不知道背后是如何实现的？今天，我们就来揭开实时通信的神秘面纱！

🤔 为什么需要WebSocket？

想象一下这个场景：你想通过网页和朋友实时聊天。

传统方法：不断敲门问"有新消息吗？"

传统HTTP通信就像这样：

复制代码

你：有新消息吗？
服务器：没有（1秒后）
你：有新消息吗？
服务器：没有（1秒后）
你：有新消息吗？
服务器：有！消息是"你好！"

这种方法效率低下，浪费资源，而且有延迟！

请求: 有新消息吗？ 2. 响应: 没有 3. 等待1秒 4. 请求: 有新消息吗？ 5. 响应: 消息: '你好！' 客户端
服务器

🚀 WebSocket：直接装个对讲机！

WebSocket就像在客户端和服务器之间安装了一部对讲机：

初次握手：客户端说"我想建立WebSocket连接"
连接建立：服务器回答"好的，连接已建立"
自由通话：双方可以随时互相发送消息
HTTP握手请求 2. 握手响应 3. WebSocket连接建立 4. 实时双向通信 5. 实时双向通信客户端
服务器

💻 手把手实战：创建简单聊天室

1. 服务器端（Node.js + ws库）

javascript 复制代码

// server.js
const WebSocket = require('ws');

// 创建WebSocket服务器，监听8080端口
const wss = new WebSocket.Server({ port: 8080 });

console.log('WebSocket服务器已启动，端口8080');

// 当有客户端连接时
wss.on('connection', (ws) => {
  console.log('新客户端已连接');
  
  // 向客户端发送欢迎消息
  ws.send('欢迎来到聊天室！');
  
  // 监听客户端发来的消息
  ws.on('message', (message) => {
    console.log('收到消息:', message.toString());
    
    // 广播消息给所有客户端
    wss.clients.forEach((client) => {
      if (client.readyState === WebSocket.OPEN) {
        client.send(`用户说: ${message}`);
      }
    });
  });
  
  // 客户端断开连接时
  ws.on('close', () => {
    console.log('客户端已断开连接');
  });
});

2. 客户端（HTML + JavaScript）

html 复制代码

<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
    <title>WebSocket聊天室</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 600px;
            margin: 0 auto;
            padding: 20px;
        }
        #messages {
            border: 1px solid #ccc;
            height: 300px;
            overflow-y: auto;
            padding: 10px;
            margin-bottom: 10px;
            border-radius: 5px;
        }
        .message {
            margin: 5px 0;
            padding: 8px;
            background-color: #f0f0f0;
            border-radius: 4px;
        }
        .message.system {
            background-color: #e3f2fd;
            color: #1565c0;
        }
        input, button {
            padding: 10px;
            font-size: 16px;
        }
        button {
            background-color: #4CAF50;
            color: white;
            border: none;
            cursor: pointer;
        }
        button:hover {
            background-color: #45a049;
        }
    </style>
</head>
<body>
    <h1>✨ 简易聊天室 ✨</h1>
    
    <div id="messages"></div>
    
    <div>
        <input type="text" id="messageInput" 
               placeholder="输入消息..." style="width: 70%;">
        <button onclick="sendMessage()" style="width: 25%;">发送</button>
    </div>
    
    <p id="status">正在连接服务器...</p>

    <script>
        // 创建WebSocket连接
        const socket = new WebSocket('ws://localhost:8080');
        
        // 连接建立时
        socket.onopen = () => {
            document.getElementById('status').innerHTML = 
                '✅ 已连接到聊天室！';
            addMessage('系统', '你已进入聊天室', true);
        };
        
        // 收到消息时
        socket.onmessage = (event) => {
            addMessage('系统', event.data, true);
        };
        
        // 连接关闭时
        socket.onclose = () => {
            document.getElementById('status').innerHTML = 
                '❌ 连接已断开';
        };
        
        // 发送消息函数
        function sendMessage() {
            const input = document.getElementById('messageInput');
            const message = input.value.trim();
            
            if (message && socket.readyState === WebSocket.OPEN) {
                socket.send(message);
                addMessage('我', message, false);
                input.value = '';
                input.focus();
            }
        }
        
        // 添加消息到聊天窗口
        function addMessage(sender, text, isSystem) {
            const messagesDiv = document.getElementById('messages');
            const messageDiv = document.createElement('div');
            
            messageDiv.className = `message ${isSystem ? 'system' : ''}`;
            messageDiv.innerHTML = `<strong>${sender}:</strong> ${text}`;
            
            messagesDiv.appendChild(messageDiv);
            messagesDiv.scrollTop = messagesDiv.scrollHeight;
        }
        
        // 按Enter键发送消息
        document.getElementById('messageInput')
            .addEventListener('keypress', (e) => {
                if (e.key === 'Enter') {
                    sendMessage();
                }
            });
    </script>
</body>
</html>

🎯 运行步骤

安装依赖：

bash 复制代码

npm install ws

启动服务器：

bash 复制代码

node server.js

打开客户端 ：

双击index.html或用本地服务器打开
测试聊天 ：

打开多个浏览器窗口，互相发送消息！

🌟 WebSocket的优势总结

特性	HTTP轮询	WebSocket
连接方式	每次请求新建连接	一次连接，长期使用
实时性	有延迟（依赖轮询间隔）	真正实时
资源消耗	高（频繁建立连接）	低（一个连接搞定）
数据传输	只能客户端主动请求	双向主动推送
头部开销	每次都有完整HTTP头部	建立后只有少量数据头

🚀 实际应用场景

实时聊天应用：微信网页版、Slack
在线协作工具：Google Docs实时协作
股票交易平台：实时股价更新
多人在线游戏：实时位置同步
IoT物联网：设备状态实时监控
实时通知：新邮件、新消息提醒

🛠️ 进阶技巧

1. 断线重连

javascript 复制代码

let reconnectInterval = 1000; // 1秒后重试
let maxReconnectInterval = 30000; // 最大30秒

function connect() {
    const socket = new WebSocket('ws://localhost:8080');
    
    socket.onclose = () => {
        setTimeout(() => {
            reconnectInterval = Math.min(
                reconnectInterval * 1.5, 
                maxReconnectInterval
            );
            connect(); // 重新连接
        }, reconnectInterval);
    };
}

2. 心跳检测

javascript 复制代码

// 定期发送心跳包，保持连接活跃
setInterval(() => {
    if (socket.readyState === WebSocket.OPEN) {
        socket.send(JSON.stringify({ type: 'heartbeat' }));
    }
}, 30000); // 每30秒一次

3. 消息格式标准化

javascript 复制代码

// 使用JSON格式的消息
const message = {
    type: 'chat', // 消息类型：chat、join、leave等
    user: '小明',
    content: '大家好！',
    timestamp: Date.now()
};

socket.send(JSON.stringify(message));

📚 学习资源推荐

MDN WebSocket文档：最权威的参考资料
Socket.IO：功能更丰富的实时通信库
ws库文档：Node.js WebSocket服务器库
WebSocket RFC：深入理解协议细节

💡 小结

WebSocket让网页从被动的"问-答"模式变成了主动的"对话"模式，为实时Web应用打开了大门。虽然本文只是入门介绍，但已经涵盖了WebSocket的核心概念和基本用法。

记住这个简单的比喻：

HTTP轮询：像不断打电话问"到了吗？到了吗？"
WebSocket：像打开视频通话，随时能看到对方

现在，你已经掌握了让网页"活"起来的关键技术！快去创建你自己的实时应用吧，无论是聊天室、实时仪表盘还是在线游戏，WebSocket都能让你的应用体验更上一层楼！

有什么问题或想了解更多？欢迎在评论区交流！ 🎉