基于JavaScript、WebSockets和jQuery的按钮状态传输WebSocket示例开发问询

嘿，刚入门这些技术遇到点小问题太正常了，咱们直接上能跑的代码，再拆解关键逻辑，帮你把按钮点击发送状态的功能稳稳搞定！

客户端代码（index.html） #

这里用jQuery处理DOM操作，页面加载时自动建立WebSocket长连接，按钮点击切换ON/OFF状态并实时发送给服务器：

<!DOCTYPE html>
<html>
<head>
    <title>WebSocket Button Demo</title>
    <!-- 如果你有本地jQuery文件，替换成本地路径即可 -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <button id="toggleBtn">OFF</button>

    <script>
        // 存储当前按钮状态
        let isButtonOn = false;
        // WebSocket连接实例
        let ws;

        // 页面加载完成后初始化连接和按钮事件
        $(document).ready(function() {
            initWebSocket();
            setupButtonClick();
        });

        // 初始化WebSocket长连接
        function initWebSocket() {
            // 替换成你的服务器地址，本地测试用ws://localhost:8080即可
            ws = new WebSocket('ws://localhost:8080');

            // 连接成功回调
            ws.onopen = function() {
                console.log('WebSocket长连接已建立 ✅');
            };

            // 接收服务器回传消息（双向通信示例）
            ws.onmessage = function(event) {
                console.log('收到服务器确认:', event.data);
                // 这里可以根据服务器返回更新页面，比如给按钮加个状态提示
            };

            // 连接意外关闭时自动重连
            ws.onclose = function() {
                console.log('WebSocket连接断开，3秒后尝试重连...');
                setTimeout(initWebSocket, 3000);
            };

            // 连接错误提示
            ws.onerror = function(error) {
                console.error('WebSocket连接出错:', error);
            };
        }

        // 设置按钮点击逻辑
        function setupButtonClick() {
            $('#toggleBtn').click(function() {
                // 切换状态
                isButtonOn = !isButtonOn;
                const currentState = isButtonOn ? 'ON' : 'OFF';
                // 更新按钮显示文本
                $(this).text(currentState);

                // 确保连接处于活跃状态才发送消息，避免报错
                if (ws.readyState === WebSocket.OPEN) {
                    ws.send(currentState);
                    console.log('已发送状态:', currentState);
                } else {
                    console.warn('WebSocket未连接，无法发送消息 ❌');
                }
            });
        }
    </script>
</body>
</html>

服务器端代码（APP.js） #

用Node.js的ws库搭建轻量WebSocket服务器，先安装依赖：

npm install ws

然后编写服务器核心逻辑：

const WebSocket = require('ws');

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

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

// 处理新客户端连接
wss.on('connection', function connection(ws) {
    console.log('新客户端已接入');

    // 接收客户端发送的状态消息
    ws.on('message', function incoming(message) {
        const state = message.toString();
        console.log('收到客户端状态:', state);
        // 可选：给客户端回发确认消息，实现双向通信
        ws.send(`服务器已确认状态：${state}`);
    });

    // 客户端断开连接提示
    ws.on('close', function() {
        console.log('客户端已断开连接');
    });
});

关键逻辑拆解 #

• 页面加载自动建连：用$(document).ready()确保DOM加载完成后初始化WebSocket，避免操作不存在的元素。
• 按钮状态管理：用isButtonOn变量跟踪状态，点击时切换并同步更新按钮文本，逻辑清晰不易混乱。
• 安全发送消息：发送前检查ws.readyState === WebSocket.OPEN，避免在连接未建立/已关闭时发送导致控制台报错。
• 长连接稳定性：添加了自动重连逻辑，当连接意外断开时3秒后自动尝试重新连接，保证长连接的持续性。

常见问题排查 #

1. 按钮点击没反应：检查按钮ID是否和jQuery选择器完全一致，确认setupButtonClick函数已被正确调用。
2. 消息发送失败：查看控制台是否有“WebSocket未连接”的警告，确认服务器已启动且地址端口匹配。
3. 连接失败：检查服务器端口是否被占用，本地防火墙是否允许该端口的网络通信。

内容的提问来源于stack exchange，提问作者wuampa