你可以做些什么？

通过使用网页设计，您将能够设计交互式系统。
例如，当世界上的某人点击网页上的按钮时，LED灯会点亮。
由于这篇文章侧重于实施，所以请自行查找详细内容。

系统配置

使用Node.js搭建web服务器，托管网页。访问网页的人被称为客户端，向服务器发起请求。
通过使用Node.js的socket.io库，可以实现类似聊天的功能。当点击网页上的按钮以控制设备时，就好比在聊天中输入特定的文字，触发执行相应的操作。

操作步骤

为了实际上从全世界连接到服务器，就必须租用一个服务器。然而，在现代，只要是这样的功能，完全可以免费实现。

在这篇文章中，我打算在我的本地电脑上先了解整个流程，然后使用glitch.com来发布网页，并希望能够从全世界接收访问。

尽管在本地实现聊天应用的方法很多，但因为这篇文章的重点是从此后将其公开给全世界，所以我们将专注于这一部分。

这里提供具体步骤的说明：
1. 搭建本地服务器
1.1 安装Node.js
1.2 编写服务器代码
1.3 编写客户端代码
2. 迁移到Glitch平台
3. 创建Node.js应用程序
4. 控制设备

想要直接跳过至glitch的移植者请点击这里。

环境

Mac

安装 node.js

有很多种方法可以在Mac上安装Node.js，但我们建议使用可以进行版本管理的nvm来进行安装。
关于这方面的内容，有很多文章可以参考，请在进行安装时参考它们。
官方文档
使用nvm + Node.js + npm进行安装的步骤

在Web页面上通过搭建服务器实现聊天。

如果您在Node.js socket.io聊天中搜索，会发现有很多参考资料，请自行查找。
我推荐阅读这篇文章：使用Node.js + Express + Socket.io创建一个简易聊天室。

在这篇文章中，我们使用了Node.js的Socket.io和Express两个库来制作聊天应用。

将故障迁移至 glitch。

打开 glitch.com，然后进行注册。
因为会有一些故障，所以推荐使用 Google Chrome。
glitch 是一个非常方便的在线服务，可以进行代码编辑和发布。

在Glitch平台上，人们可以通过以代码remix的形式重新使用它。如果您觉得自己处理这个过程很麻烦，可以点击链接跳转到页面上，在右上角选择”remix to edit”。

在注册完后，点击右上方的“New Project”，然后选择“glitch-hello-node”。
打开后，我想你会看到有一些示例文件，但我们不需要public/，src/和server.js这些文件，所以让我们从它们文件名右侧的菜单中选择“delete”并将它们删除掉。

接下来，我们将上传之前创建的app.js和index.html文件。
请从新文件选项中选择上传文件。

然后，我们会添加所缺少的模块。
从glitch画面左下角的工具中选择Terminal选项。
（在Safari中可能无法写入Terminal。）

$ npm install express --save
$ npm install socket.io --save

最后，将package.json的第5至7行的main代码修改为app.js。

"main": "app.js",
  "scripts": {
    "start": "node app.js"
  },

这样，服务器应该能正常运作。

换句话说，您可以从全世界访问这个网站。

请点击左上角的”Show”，选择”在新窗口中打开”，打开一个新的网页。
由于该链接是公开的，您也可以通过智能手机等设备访问。

在设备上接收消息

好的，现在开始讨论核心问题。有什么办法可以使设备接收到这条消息呢？
实际上，使用Node.js的话，我们可以通过socket.io实现从网页以外的地方接收通信。

我会在支持Node.js运行的设备上（如Mac和树莓派）创建一个接收程序。
首先，我会创建一个工作目录，并使用npm安装所需的模块。

$ mkdir receiver
$ cd receiver
$ npm install socket.io-client --save
$ touch client.js

我将开始编写client.js的内容。

const io = require('socket.io-client');

var socket = io.connect('glitchなどのURL');//接続先のサーバを指定

socket.on('message' ,function (data) {
    console.log(data);
});

请将连接的服务器指定为先前在Glitch上发布的Web页面的URL。
然后执行此操作。

$ node client.js

现在，我们尝试从刚才创建的故障网站上发送一些内容。
你看到了吗？

与应用程序的互联

现在，我们将使用这个值来实际控制设备。
在这里，我们将介绍如何使用OSC将这些数据发送到其他应用程序，并介绍如何使用树莓派等设备的GPIO来进行LED闪烁。

使用OSC将数据传输到其他应用程序

安装用于发送OSC的模块。如果你不熟悉OSC，它非常方便，建议你先搜索一下。

我們有準備使用GitHub。

$ npm install node-osc --save

为了发送OSC消息，对client.js进行修改。

const { Client, Server } = require('node-osc');
const io = require('socket.io-client');


const client = new Client('127.0.0.1', 3333);

var socket = io.connect('glitchなどのURL');//接続先のサーバを指定

socket.on('message' ,function (data) {
  console.log(data)
  client.send('/message', String(data)); //型に注意
  });

在这个例子中，我将网页上输入的内容发送到我的计算机的3333端口。
需要注意的一点是要注意发送数据的类型。由于JavaScript基本上不需要声明类型，所以可能不会注意到，但是比如当想要将数据发送到Touch Designer的OSC In Chop时，就不能接受String()类型的数据，所以需要转换为Int()或Float()类型。

好吧，怎么样呢？您在其他应用中能收到吗？

控制GPIO，闪烁L灯

以下是一个例子，用于控制Raspberry Pi等GPIO。当网页发送0时，LED会关闭；而当发送1时，LED会打开。

$ npm install onoff --save

为了控制GPIO，我们将修改client.js文件。

const io = require('socket.io-client');
const Gpio = require('onoff').Gpio
var led = new Gpio(8, 'out')
var socket = io.connect('glitchなどのURL');//接続先のサーバを指定
socket.on('message' ,function (data) {
    console.log(data)
    if(data == '0'){
        led.writeSync(0)
    }else if(data == '1'){
        led.writeSync(1)
    }
});

总结

在网站上控制一些东西真的很有趣！请务必通过Twitter等平台公开您自己制作的网站链接，让许多人来闪烁照亮它！！