JavaScript和Chrome中的SSDP发现_chrome 239.255.255.250 ssdp

作者：小丑西瓜9 | 2024-04-23 17:36:00

踩

chrome 239.255.255.250 ssdp

介绍

从Chrome中的HTML和JavaScript内发现使用SSDP的本地设备

下载源文件 - 41.4 KB

介绍

在实施一些项目时，我决定用HTML实现它们，因为它可以在我感兴趣的最广泛的设备上工作。我感兴趣的项目需要发现连接到我的家庭网络的其他设备。我用SSDP进行发现。

什么是SSDP？

SSDP（简单服务发现协议）是基于UDP的协议，是UPnP的一部分，用于在网络上查找其他设备和服务。它由许多设备实现，包括网络附加存储设备，智能电视和家庭自动化系统。有很多这些设备通过JSON调用公开功能。您可以轻松地创建接口来控制这些设备。但是，由于HTML和JavaScript的标准不包含UDP接口，因此如何执行发现并不是很明显。SSDP的替代方案包括让用户手动输入感兴趣的设备的IP地址或扫描网络。这些选项中的后者可以在某些公司网络上执行时引发一些安全标记，并且可能需要很长时间。在大多数情况下，解决方案都是依赖于平台。有各种基于HTML的解决方案，允许您通过UDP进行通信。例如，BrightSign HTML5播放器通过使用roDatagramSocket支持UDP。Chrome通过chrome.udp.sockets提供UDP通信。

在Chrome中使用UDP的要求

网页没有访问此接口的权限（这是有充分理由的，因为在其他方面可能会被滥用）。虽然网络应用无法访问，但Chrome扩展程序可以访问。Chrome扩展程序无法在其他浏览器中使用。但在撰写本文时，Chrome占浏览器市场份额的67％，微软已宣布将使用Chromium作为其Edge浏览器的基础。虽然这种UDP套接字实现在各种浏览器中都不可用，但它在很大程度上可供大多数用户使用，因为这是大多数桌面用户的首选浏览器。要将HTML代码作为扩展运行，需要另外两个元素：清单和后台脚本。后台脚本将创建一个窗口并将开始的HTML加载到其中。


chrome.app.runtime.onLaunched.addListener(function() {
    chrome.app.window.create('index.html', {
        'outerBounds': {
        'width': 600,
        'height': 800
        }
    });
});

我不会详细介绍清单中的内容，但我会强调其最重要的元素。清单采用JSON格式。定义要运行的初始脚本app.background.scripts。其他重要元素是permission元素和manifest_version元素，没有permission元素，通过UDP或加入多播组进行通信的尝试将失败并且。其他元素是直观的。


{
    "name": "SSDP Browser",
    "version": "0.1",
    "manifest_version": 2,
    "minimum_chrome_version": "27",
    "description": "Discovers SSDP devices on the network",
    "app": {
      "background": {
        "scripts": [
          "./scripts/background.js"
        ]
      }
    },
 
    "icons": {
        "128": "./images/j2i-128.jpeg",
        "64": "./images/j2i-64.jpeg",
        "32": "./images/j2i-32.jpeg"
    },
 
    "permissions": [
      "http://*/",
      "storage",
      {
        "socket": ["udp-send-to", "udp-bind", "udp-multicast-membership"]
      }
    ]
  }

使用UDP执行SSDP的步骤

Google已经发布了一个包装器，作为chrome.udp.sockets在网络上使用多播发布的代码示例。Google代码示例以未经更改的形式假定文本采用Unicode的16位字符编码进行编码。SSDP使用8位ASCII编码。我已经使用了Google的类，并对其进行了一些小改动使其可以使用ASCII而不是Unicode。要执行SSDP搜索，请执行以下步骤。

创建UDP端口并将其连接到组播组239.255.255.250
在端口1900上发送M-SEARCH查询
等待来自其他设备上的从端口1900传入的响应
解析响应
一段时间后停止监听

第一步主要由Google Multicast类处理。我们只需要将端口和地址传递给它。M-SEARCH查询是一个string。至于最后一步，当响应停止进入时，它不是决定性的。即使没有请求，某些设备似乎偶尔也会在网络上广播消息。从理论上讲，你可以继续得到回应。在某个时候，我建议不再监听。五到十秒的时间通常是足够的。M-SEARCH参数有变化，但以下内容可用于询找所有设备。还有其他查询可用于筛选具有特定功能的设备。以下是我使用的string; 不立即可见的是，在最后一行文本之后，有两个空行。


M-SEARCH * HTTP/1.1
HOST: 239.255.255.250:1900
MAN: "ssdp:discover"
MX: 3
ST: ssdp:all
USER-AGENT: Joel's SSDP Implementation

当响应出现时，我们分配给MulticastScoket.onDiagram的函数将使用包含响应的字节数组、响应来自的IP地址和发送响应的端口号（当前应用程序的端口号为1900）应用）来调用。在下面的代码示例中，我启动搜索并将响应打印到JavaScript控制台。


const SSDP_ADDRESS = '239.255.255.250';
const SSDP_PORT = 1900;
const SSDP_REQUEST_PAYLOAD =    "M-SEARCH * HTTP/1.1\r\n"+
                                "HOST: 239.255.255.250:1900\r\n"+
                                "MAN: \"ssdp:discover\"\r\n"+
                                "MX: 3\r\n"+
                                "ST: ssdp:all\r\n"+
                                "USER-AGENT: Joel's SSDP Implementation\r\n\r\n";
 
var searchSocket = null;
 
function beginSSDPDiscovery() { 
    if (searchSocket)
        return;
    $('.responseList').empty();
    searchSocket = new MulticastSocket({address:SSDP_ADDRESS, port:SSDP_PORT});
    searchSocket.onDiagram = function(arrayBuffer, remote_address, remote_port) {
        console.log('response from ', remote_address, " ", remote_port);
        var msg = searchSocket.arrayBufferToString8(arrayBuffer);
        console.log(msg);        
    }
    searchSocket.connect({call:function(c) {
        console.log('connect result',c);
        searchSocket.sendDiagram(SSDP_REQUEST_PAYLOAD,{call:()=>{console.log('success')}});
        setTimeout(endSSDPDiscovery, 5000);
    }});    
}

并不是解析响应string很困难，无论如何，如果响应是JSON对象会更方便。我已经创建了一个函数，可以快速转换响应，因此我可以像任何其他JSON对象一样使用它。


function discoveryStringToDiscoveryDictionary(str) {
    var lines = str.split('\r');
    var retVal = {}
    lines.forEach((l) => {
        var del = l.indexOf(':');
        if(del>1) {
            var key = l.substring(0,del).trim().toLowerCase();
            var value = l.substring(del+1).trim();
            retVal[key]=value;
        }
    });
    return retVal;
}

完成此转换后，我网络上的Roku流媒体播放器返回了以下响应。（我改变了序列号。）


{
    cache-control: "max-age=3600",
    device-group.roku.com: "D1E000C778BFF26AD000",
    ext: "",
    location: "http://192.168.1.163:8060/",
    server: "Roku UPnP/1.0 Roku/9.0.0",
    st: "roku:ecp",
    usn: "uuid:roku:ecp:1XX000000000",
    wakeup: "MAC=08:05:81:17:9d:6d;Timeout=10"    ,
}

已经为要使用的示例分享了足够的代码，但是我将更改示例以在UI中显示响应，而不是依赖于开发JavaScript控制台。为了简单起见，我定义了HTML结构，将每个结果用作palette的div元素的子元素。这个元素是隐藏的，但对于每个响应，我将克隆ssdpDevice类的div元素; 将改变一些子成员; 并将其附加到页面的可见部分。


 <html>
    <head>
        <link rel="stylesheet" href="styles/style.css" />
        <script src="./scripts/jquery-3.3.1.min.js"></script>
        <script src="./scripts/MulticastSocket.js"></script>
        <script src="./scripts/app.js"></script>
    </head>
    <body>
        <div class="visualRoot">
            <div>
                <button id="scanNetworkButton">Scan Network</button>
            </div>
            <div class="responseList">
 
            </div>
        </div>
        <div class="palette">
 
            <div class="ssdpDevice">
                <div>address: <span class="ipAddress"></span></div>
                <div >location: <span class="location"></span></div>
                <div >server: <span class="server"></span></div>
                <div> search target:<span class="searchTarget"></span></div>
            </div>
 
        </div>
    </body>
</html>

改变后的函数现在将在HTML中显示SSDP响应，如下所示：


function beginSSDPDiscovery() {
    if (searchSocket)
        return;
    $('.responseList').empty();
    searchSocket = new MulticastSocket({address:SSDP_ADDRESS, port:SSDP_PORT});
    searchSocket.onDiagram = function(arrayBuffer, remote_address, remote_port) {
        console.log('response from ', remote_address, " ", remote_port);
        var msg = searchSocket.arrayBufferToString8(arrayBuffer);
        console.log(msg);
        discoveryData = discoveryStringToDiscoveryDictionary(msg);
        console.log(discoveryData);
 
        var template = $('.palette').find('.ssdpDevice').clone();
        $(template).find('.ipAddress').text(remote_address);
        $(template).find('.location').text(discoveryData.location);
        $(template).find('.server').text(discoveryData.server);
        $(template).find('.searchTarget').text(discoveryData.st)
        $('.responseList').append(template);
    }
    searchSocket.connect({call:function(c) {
        console.log('connect result',c);
        searchSocket.sendDiagram(SSDP_REQUEST_PAYLOAD,{call:()=>{console.log('success')}});
        setTimeout(endSSDPDiscovery, 5000);
    }});
}

发现设备！现在怎么办？

从这里出发取决于他们的意图和设备的能力。不同的设备实现不同的API以访问其功能。您可以找到有关在UPnP规范下实现的常规API的更多信息，但许多允许以这种方式发现它们的设备可以通过它们自己的API提供功能。

原文地址：https://www.codeproject.com/Articles/1273691/SSDP-Discovery-in-JavaScript-and-Chrome

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小丑西瓜9/article/detail/475201