本文共 6163 字，大约阅读时间需要 20 分钟。
目录
从Chrome中的HTML和JavaScript内发现使用SSDP的本地设备
介绍
在实施一些项目时，我决定用HTML实现它们，因为它可以在我感兴趣的最广泛的设备上工作。我感兴趣的项目需要发现连接到我的家庭网络的其他设备。我用SSDP进行发现。
什么是SSDP？
SSDP（）是基于UDP的协议，是UPnP的一部分，用于在网络上查找其他设备和服务。它由许多设备实现，包括网络附加存储设备，智能电视和家庭自动化系统。有很多这些设备通过JSON调用公开功能。您可以轻松地创建接口来控制这些设备。但是，由于HTML和JavaScript的标准不包含UDP接口，因此如何执行发现并不是很明显。SSDP的替代方案包括让用户手动输入感兴趣的设备的IP地址或扫描网络。这些选项中的后者可以在某些公司网络上执行时引发一些安全标记，并且可能需要很长时间。在大多数情况下，解决方案都是依赖于平台。有各种基于HTML的解决方案，允许您通过UDP进行通信。例如，BrightSign HTML5播放器通过使用支持UDP。Chrome通过提供UDP通信。
在Chrome中使用UDP的要求
网页没有访问此接口的权限（这是有充分理由的，因为在其他方面可能会被滥用）。虽然网络应用无法访问，但Chrome扩展程序可以访问。Chrome扩展程序无法在其他浏览器中使用。但在撰写本文时，Chrome占浏览器市场份额的67％，微软已宣布将使用作为其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.1HOST: 239.255.255.250:1900MAN: "ssdp:discover"MX: 3ST: ssdp:allUSER-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元素; 将改变一些子成员; 并将其附加到页面的可见部分。
address:location:server:search target:
改变后的函数现在将在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提供功能。
原文地址：
转载地址：http://juzhj.baihongyu.com/