JavaScript如何校验WebSocket接收消息并触发声音播放等操作

核心逻辑 #

• 预加载提示音避免播放卡顿
• WebSocket消息回调里做严格字符串匹配，收到Hello From Client1!时播放提示音，其余消息走对应业务分支
• 适配浏览器自动播放规则，解决无交互时音频被拦截的问题

可直接使用的Client2完整代码 #

<body>
    Client2
    <button onclick="sendMessage()">Send Msg</button>

    <script>
        // 替换成你自己的提示音文件路径
        const noticeSound = new Audio('./call_notice.mp3');
        let audioReady = false;

        // 处理浏览器自动播放限制：用户首次点击/触摸页面后解锁音频权限
        const unlockAudio = () => {
            if (audioReady) return;
            noticeSound.play().then(() => {
                noticeSound.pause();
                noticeSound.currentTime = 0;
                audioReady = true;
            }).catch(() => {});
            document.removeEventListener('click', unlockAudio);
            document.removeEventListener('touchstart', unlockAudio);
        }
        document.addEventListener('click', unlockAudio);
        document.addEventListener('touchstart', unlockAudio);

        // 建立WebSocket连接
        const socket = new WebSocket('ws://localhost:3000');

        socket.addEventListener('open', () => {
            console.log('Connected to WS Server');
        });

        // 消息监听逻辑
        socket.addEventListener('message', (event) => {
            const msg = event.data.trim();
            console.log('Message from server ', msg);

            // 匹配到Client1的叫号消息
            if (msg === 'Hello From Client1!') {
                // 重置播放进度，避免连续触发时不响
                noticeSound.currentTime = 0;
                noticeSound.play().catch(err => {
                    console.error('提示音播放失败：', err);
                });
                // 此处可追加叫号配套逻辑：弹窗提醒、更新当前叫号序号、高亮排队条目等
                return;
            }

            // 其余消息的处理逻辑写在这
            // 比如排队位次更新、服务端心跳响应、系统通知等
        });

        const sendMessage = () => {
            socket.send('Hello From Client2!');
        }
    </script>
</body>

补充说明 #

• Client1原有代码不需要改动，保持现有逻辑即可
• 提前确认WebSocket服务端已配置消息广播规则：单个客户端发送的消息会转发给所有其他在线客户端，否则跨客户端消息无法送达
• 提示音建议用体积小于100KB的短mp3文件，放在站点同目录下避免跨域问题
• 需要调整音量的话，初始化Audio后加一行noticeSound.volume = 0.8;即可，参数范围0到1

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