如何在电视端实现SSDP+WebSocket服务器以连接React Native与HbbTV应用

一、技术选型 #

电视端的SSDP+WebSocket服务器推荐用Node.js实现：

• 轻量易部署，适配多数智能电视的webOS/Tizen系统
• 成熟的第三方库支持SSDP和WebSocket开发
• 可直接与React应用共享运行环境，简化通信逻辑

二、SSDP服务器实现 #

依赖安装 #

npm install node-ssdp

核心代码 #

const ssdp = require('node-ssdp').Server;
const os = require('os');

// 获取电视本地IP（用于告知移动端WebSocket地址）
function getLocalIPv4() {
  const interfaces = os.networkInterfaces();
  for (const ifaceName of Object.keys(interfaces)) {
    for (const iface of interfaces[ifaceName]) {
      if (iface.family === 'IPv4' && !iface.internal) {
        return iface.address;
      }
    }
  }
  return '127.0.0.1';
}

const localIP = getLocalIPv4();
const wsPort = 8081; // 自定义WebSocket服务器端口

// 初始化SSDP服务器
const ssdpServer = new ssdp({
  location: `http://${localIP}:8080/device.xml`, // 可选：设备描述文件地址
  udn: 'uuid:hbbtv-controller-123', // 设备唯一标识，自定义即可
  allowWildcards: true
});

// 注册自定义设备类型（移动端SSDP客户端需匹配该类型）
ssdpServer.addUSN('urn:schemas-custom:device:HbbTVRemote:1');

// 响应SSDP搜索时，携带WebSocket地址信息
ssdpServer.on('search', (req, res) => {
  res.setHeader('X-WebSocket-Address', `ws://${localIP}:${wsPort}`);
  ssdpServer.reply(req, res);
});

// 启动SSDP服务器
ssdpServer.start();
console.log(`SSDP server running, advertising device at ${localIP}`);

三、WebSocket服务器实现 #

依赖安装 #

npm install ws

核心代码 #

const WebSocket = require('ws');

const wss = new WebSocket.Server({ port: wsPort });
const connectedClients = new Set(); // 管理所有连接的客户端（移动端+HbbTV应用）

wss.on('connection', (ws) => {
  connectedClients.add(ws);
  console.log('New client connected');

  // 转发消息到所有其他客户端
  ws.on('message', (data) => {
    connectedClients.forEach(client => {
      if (client !== ws && client.readyState === WebSocket.OPEN) {
        client.send(data.toString());
      }
    });
  });

  ws.on('close', () => {
    connectedClients.delete(ws);
    console.log('Client disconnected');
  });
});

console.log(`WebSocket server running on ws://${localIP}:${wsPort}`);

四、与HbbTV React应用集成 #

在React应用中直接连接本地WebSocket服务器，实现消息监听与发送：

import { useEffect, useState } from 'react';

const HbbTVApp = () => {
  const [wsConnection, setWsConnection] = useState(null);
  const [receivedMsg, setReceivedMsg] = useState('');
  const wsPort = 8081; // 与服务器端保持一致

  useEffect(() => {
    // 连接电视端WebSocket服务器（用当前页面hostname，即电视IP）
    const ws = new WebSocket(`ws://${window.location.hostname}:${wsPort}`);
    
    ws.onopen = () => console.log('Connected to TV WebSocket server');
    ws.onmessage = (event) => setReceivedMsg(event.data);
    ws.onclose = () => console.log('Disconnected from WebSocket server');

    setWsConnection(ws);

    // 组件卸载时关闭连接
    return () => ws.close();
  }, []);

  // 向移动端发送消息的方法
  const sendToMobile = (msg) => {
    if (wsConnection?.readyState === WebSocket.OPEN) {
      wsConnection.send(msg);
    }
  };

  return (
    <div className="hbbtv-app">
      <h1>HbbTV 应用</h1>
      <p>移动端消息：{receivedMsg}</p>
      <button onClick={() => sendToMobile('电视已收到消息')}>回复移动端</button>
    </div>
  );
};

export default HbbTVApp;

五、电视端部署注意事项 #

1. 系统适配：
   • webOS电视：将Node.js应用打包为IPK，配置后台运行权限，启动脚本先启动SSDP+WebSocket服务器，再调用系统浏览器打开React应用
   • Tizen电视：打包为WGT包，声明网络、后台运行权限，通过Tizen Studio部署
2. 端口开放：确保电视防火墙开放SSDP默认端口（1900/UDP）和自定义的WebSocket端口（如8081/TCP）
3. 开机自启：在电视系统中配置服务器应用为开机启动，保证移动端能随时搜索到设备

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