如何在Svelte中实现WebSocket主题订阅？替代方案解析

你之前用STOMP协议轻松实现了WebSocket的主题订阅，现在切换到Svelte+Node.js原生WebSocket环境后不知道怎么复刻这个功能对吧？别担心，这里有两种靠谱的方案，你可以根据自己的需求选：

方案一：继续用STOMP协议（推荐，适配你已有的经验） #

STOMP是基于WebSocket的应用层协议，专门用来处理消息订阅/发布场景，你完全可以在Svelte里沿用之前的思路，只是结合Svelte的生命周期来编写代码。

前端Svelte代码示例 #

首先安装STOMP库：npm install stompjs

<script>
import { onMount } from 'svelte';
import Stomp from 'stompjs';

let stompClient;
let isConnected = false;

onMount(() => {
    // 用原生WebSocket连接后端的STOMP端点
    const socket = new WebSocket("ws://localhost:8000/stomp");
    stompClient = Stomp.over(socket);

    // 连接STOMP服务器
    stompClient.connect({}, () => {
        console.log("STOMP连接成功");
        isConnected = true;

        // 订阅带通配符的主题，和你之前的用法一致
        stompClient.subscribe('/topic/someTopic.*', (message) => {
            const payload = JSON.parse(message.body);
            console.log("收到主题消息：", payload);
            // 这里直接更新Svelte状态即可，比如绑定到组件变量
        });
    }, (error) => {
        console.error("STOMP连接失败：", error);
        alert(`连接出错：${error}`);
    });

    // 组件销毁时自动断开连接，避免资源泄漏
    return () => {
        if (stompClient?.connected) {
            stompClient.disconnect();
            isConnected = false;
            console.log("STOMP连接已关闭");
        }
    };
});
</script>

{#if isConnected}
<p>已连接到消息服务器，正在监听主题...</p>
{:else}
<p>正在连接消息服务器...</p>
{/if}

后端注意事项 #

你的Node.js后端需要支持STOMP协议，你可以选择：

• 使用stomp-broker-js这类库直接搭建STOMP服务器
• 结合RabbitMQ、ActiveMQ这类成熟的消息中间件来处理STOMP消息
• 自己实现简单的STOMP协议解析逻辑（不推荐，除非有特殊需求）

方案二：基于原生WebSocket自定义主题订阅逻辑 #

如果不想依赖STOMP库，你可以在应用层自己定义消息格式，实现主题订阅的核心逻辑，完全可控。

后端Node.js代码示例（用ws库） #

首先安装ws库：npm install ws

const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 8000 });

// 存储订阅关系：key是主题，value是订阅该主题的客户端集合
const subscriptions = new Map();

wss.on('connection', (ws) => {
    console.log('新客户端接入');

    ws.on('message', (data) => {
        try {
            const message = JSON.parse(data);
            switch (message.type) {
                case 'SUBSCRIBE':
                    // 处理订阅请求
                    const topic = message.topic;
                    if (!subscriptions.has(topic)) {
                        subscriptions.set(topic, new Set());
                    }
                    subscriptions.get(topic).add(ws);
                    console.log(`客户端订阅主题：${topic}`);
                    ws.send(JSON.stringify({ type: 'SUBSCRIBE_ACK', topic }));
                    break;
                case 'UNSUBSCRIBE':
                    // 处理取消订阅
                    const unsubscribeTopic = message.topic;
                    if (subscriptions.has(unsubscribeTopic)) {
                        subscriptions.get(unsubscribeTopic).delete(ws);
                        if (subscriptions.get(unsubscribeTopic).size === 0) {
                            subscriptions.delete(unsubscribeTopic);
                        }
                        console.log(`客户端取消订阅主题：${unsubscribeTopic}`);
                        ws.send(JSON.stringify({ type: 'UNSUBSCRIBE_ACK', topic: unsubscribeTopic }));
                    }
                    break;
                case 'PUBLISH':
                    // 处理消息发布
                    const publishTopic = message.topic;
                    const payload = message.payload;
                    // 如果需要支持通配符（比如/topic/someTopic.*），这里可以用正则匹配主题
                    subscriptions.forEach((clients, topic) => {
                        // 示例：简单的通配符匹配，*匹配任意字符
                        const regex = new RegExp(`^${publishTopic.replace(/\*/g, '.*')}$`);
                        if (regex.test(topic)) {
                            clients.forEach(client => {
                                if (client.readyState === WebSocket.OPEN) {
                                    client.send(JSON.stringify({
                                        type: 'MESSAGE',
                                        topic,
                                        payload
                                    }));
                                }
                            });
                        }
                    });
                    break;
                default:
                    console.log('未知消息类型');
            }
        } catch (err) {
            console.error('解析消息失败：', err);
        }
    });

    ws.on('close', () => {
        console.log('客户端断开连接');
        // 清理该客户端的所有订阅
        subscriptions.forEach((clients, topic) => {
            clients.delete(ws);
            if (clients.size === 0) subscriptions.delete(topic);
        });
    });
});

前端Svelte代码示例 #

<script>
import { onMount } from 'svelte';

let socket;
let subscribedTopics = [];

onMount(() => {
    socket = new WebSocket("ws://localhost:8000");

    socket.addEventListener('open', () => {
        console.log('WebSocket连接成功');
        // 初始化订阅主题
        subscribeToTopic('/topic/someTopic.1');
        subscribeToTopic('/topic/someTopic.2');
    });

    socket.addEventListener('message', (event) => {
        const message = JSON.parse(event.data);
        switch (message.type) {
            case 'SUBSCRIBE_ACK':
                console.log(`成功订阅：${message.topic}`);
                subscribedTopics = [...subscribedTopics, message.topic];
                break;
            case 'UNSUBSCRIBE_ACK':
                console.log(`取消订阅：${message.topic}`);
                subscribedTopics = subscribedTopics.filter(t => t !== message.topic);
                break;
            case 'MESSAGE':
                console.log(`收到主题[${message.topic}]的消息：`, message.payload);
                // 这里处理消息，比如更新组件的状态
                break;
            default:
                console.log('未知消息类型');
        }
    });

    socket.addEventListener('close', () => {
        console.log('WebSocket连接断开');
        subscribedTopics = [];
    });

    // 组件销毁时关闭连接
    return () => socket?.close();
});

// 订阅主题函数
function subscribeToTopic(topic) {
    if (socket?.readyState === WebSocket.OPEN) {
        socket.send(JSON.stringify({ type: 'SUBSCRIBE', topic }));
    }
}

// 取消订阅函数
function unsubscribeFromTopic(topic) {
    if (socket?.readyState === WebSocket.OPEN) {
        socket.send(JSON.stringify({ type: 'UNSUBSCRIBE', topic }));
    }
}

// 发布消息到主题函数（如果需要）
function publishToTopic(topic, payload) {
    if (socket?.readyState === WebSocket.OPEN) {
        socket.send(JSON.stringify({ type: 'PUBLISH', topic, payload }));
    }
}
</script>

<div>
    <p>已订阅主题：{subscribedTopics.length ? subscribedTopics.join(', ') : '无'}</p>
    <button on:click={() => subscribeToTopic('/topic/newTopic')}>订阅新主题</button>
    <button on:click={() => unsubscribeFromTopic('/topic/someTopic.1')}>取消订阅主题1</button>
</div>

自定义方案的拓展说明 #

如果需要支持你之前用的/topic/someTopic.*这类通配符，后端可以通过正则表达式来匹配主题，示例里已经写了简单的通配符处理逻辑，你可以根据自己的需求扩展（比如支持#匹配多级路径等）。

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