使用節(jié)點(diǎn)構(gòu)建您自己的物聯(lián)網(wǎng)平臺(tái)

描述

如果您是硬件愛(ài)好者，那么您可能已經(jīng)通過(guò) WiFi 使 LED 閃爍。

可能在您的本地網(wǎng)絡(luò)上或使用 Blynk 或 ThingSpeak 等第三方服務(wù)通過(guò)互聯(lián)網(wǎng)。

但它要么只適用于您的本地網(wǎng)絡(luò)，要么您必須使用一些第 3 方解決方案。

在本文中，我將指導(dǎo)您如何構(gòu)建您自己的 IoT 最小平臺(tái)，該平臺(tái)可在 Internet 上運(yùn)行。

我們的平臺(tái)將分為三個(gè)部分，

• 用戶界面即。前端
• 服務(wù)器即后端
• 硬件

應(yīng)用程序的所有三個(gè)部分都應(yīng)該能夠?qū)崟r(shí)相互通信。

基于硬件的產(chǎn)品/項(xiàng)目的明顯協(xié)議是 MQTT。

MQTT 是一種輕量級(jí)通信協(xié)議，旨在甚至在低功耗硬件上運(yùn)行。但今天我們不使用 MQTT ，為了簡(jiǎn)單和運(yùn)行服務(wù)器的成本。

像 Heroku 這樣的網(wǎng)絡(luò)托管平臺(tái)有很多，我們可以免費(fèi)使用。您甚至不需要信用卡即可注冊(cè)。

MQTT 不適用于這些 PaaS（平臺(tái)即服務(wù)）提供商。

所以我們將使用下一個(gè)最好的東西，Introducing Web Sockets。

它不像 MQTT 那樣簡(jiǎn)單，但我們使用的 MCU 足夠強(qiáng)大來(lái)處理它。

下圖是系統(tǒng)將如何通信

現(xiàn)在我們已經(jīng)弄清楚了協(xié)議

我們將使用我們值得信賴的老朋友 ESP8266，它非常受歡迎，價(jià)格便宜，而且很可能您身邊就有一個(gè) NodeMCU。

我們將使用 Arduino IDE 對(duì)我們的 ESP 進(jìn)行編程。

現(xiàn)在讓我們談?wù)勎覀兊姆?wù)器，我們將構(gòu)建一個(gè) node.js [添加鏈接] 應(yīng)用程序，

我們將借助兩個(gè) node.js 庫(kù)來(lái)創(chuàng)建我們的服務(wù)器。

用于 HTTP 連接的 express.js 和用于 WebSockets 連接的Socket.io 。

我們平臺(tái)的前端是純 HTML、CSS 和一些 JavaScript。沒(méi)有什么比 React、Angular 或 Vue 更花哨的了（但你可以期待未來(lái)的教程）。

我們的 UI 很簡(jiǎn)單，它只有一個(gè)按鈕，我們將使用 javascript 監(jiān)聽這個(gè)按鈕的點(diǎn)擊并通過(guò) WebSockets 更新服務(wù)器。

編碼時(shí)間

服務(wù)器代碼走查

讓我們從編碼我們的服務(wù)器開始。

您需要在您的機(jī)器上下載并安裝。node.js

根據(jù)操作系統(tǒng)，安裝過(guò)程可能會(huì)有所不同。

完成此操作后，讓我們克隆項(xiàng)目代碼庫(kù)。

git clone git@github.com:B45i/ESP-Websocket-Switch.git

或者你可以從GitHub下載并解壓它（但要確保你已經(jīng)安裝git在你的機(jī)器上，我們需要它用于后面的步驟）

只想瀏覽代碼？試試這個(gè)在線代碼編輯器。

執(zhí)行此操作后，在您喜歡的代碼編輯器中打開新創(chuàng)建的文件夾，我將使用 VS Code。

你會(huì)看到這樣的東西：

固件文件夾有我們的 Arduino 代碼，該src文件夾包含我們的服務(wù)器和 UI 代碼。

package.json文件包含有關(guān)我們將需要的庫(kù)的信息，盡管它沒(méi)有安裝在我們的文件夾中。

在終端中打開我們的項(xiàng)目文件夾并輸入npm i （確保您的終端指向package.json文件所在的位置）

這將安裝所有必要的庫(kù)。

如果您查看 的script部分package.json，您會(huì)看到如下命令：

"scripts": {
        "dev": "nodemon src/app.js",
        "start": "node src/app.js"
}

我們可以通過(guò)鍵入npm run dev或運(yùn)行這些命令npm run start。

npm run dev將以開發(fā)模式運(yùn)行我們的服務(wù)器，即，它將監(jiān)聽任何文件更改并重新運(yùn)行服務(wù)器。

amal@Amals-MacBook-Pro esp-socket % npm run dev
> esp-socket@1.0.0 dev
> nodemon src/app.js
[nodemon] 2.0.19
[nodemon] to restart at any time, enter `rs`
[nodemon] watching path(s): *.*
[nodemon] watching extensions: js,mjs,json
[nodemon] starting `node src/app.js`
Running on :  { address: '::', family: 'IPv6', port: 4001 }

您可以通過(guò)打開應(yīng)用程序來(lái)查看http://localhost:4001/

當(dāng)我們部署代碼時(shí)，服務(wù)器將使用npm run start命令運(yùn)行。

這兩個(gè)命令都指向文件夾app.js中。src

我們來(lái)看看那個(gè)文件。

app.js文件是這樣開始的

import express from 'express';
import http from 'http';
import { Server } from 'socket.io';

在這里，我們將導(dǎo)入我們將要使用的所有庫(kù)。

請(qǐng)注意，我在這里使用 ES6 導(dǎo)入語(yǔ)句，在package.json文件中設(shè)置type為module啟用此功能。

當(dāng)我們將代碼部署到像 Heroku 這樣的平臺(tái)時(shí)，我們的服務(wù)器將要運(yùn)行的端口將來(lái)自一個(gè)名為PORT.

const PORT = process.env.PORT || 4001;

在本地，環(huán)境變量將為空，因此如果它為空，我們將端口設(shè)置為4001.

現(xiàn)在讓我們配置 express（node.js HTTP 框架）和Socket.io（WebSocket 庫(kù)）

const app = express();
const httpServer = http.createServer(app);
const io = new Server(httpServer, { cors: { origin: '*' } });

當(dāng)瀏覽器發(fā)送請(qǐng)求時(shí)，我們需要發(fā)送我們的 UI HTML / CSS 和 Javascript 文件。

這是使用 expresse 的靜態(tài)中間件完成的

app.use(express.static('src/ui'));

我們需要在服務(wù)器中維護(hù)按鈕的狀態(tài)，這是使用buttonState.

let buttonState = false;

其余代碼用于管理我們的 WebSocket 連接。

io.on('connection', socket => {
	console.log('New Connection');
	io.to(socket.id).emit('buttonState', buttonState);
	.
	.
	.
}

當(dāng)新的 WS 客戶端連接到服務(wù)器時(shí)，將執(zhí)行此代碼。

在這個(gè)箭頭函數(shù)中，我們將編寫其余與 WS 相關(guān)的代碼。

WebSocket 是基于事件的，每當(dāng)你想發(fā)送一些數(shù)據(jù)時(shí)，你將它作為一個(gè)事件傳播，并附加一些信息。

當(dāng)我們查看我們的 UI 代碼時(shí)，這將更加清晰。

我們需要在客戶加入時(shí)告訴他們按鈕的當(dāng)前狀態(tài)，以便他們可以同步。

io.to(socket.id).emit('buttonState', buttonState);

這段代碼獲取新加入的客戶端的 ID，并將按鈕的當(dāng)前狀態(tài)發(fā)送給它。

在connection回調(diào)函數(shù)里面，可以看到各種WebSocket事件相關(guān)的代碼

socket.on('disconnect', () => {
        console.log('Disconnected');
    });

    socket.on('buttonState', value => {
				buttonState = value;
        socket.broadcast.emit('buttonState', value);
    });

第一個(gè)是disconnect當(dāng)客戶端斷開連接時(shí)的事件，這個(gè)事件被觸發(fā)，我們現(xiàn)在不打算使用這個(gè)事件。

socket.on('buttonState', value => {
	 			buttonState = value;
        socket.broadcast.emit('buttonState', value);
    });

這是負(fù)責(zé)連接我們的 UI 和硬件的代碼。

當(dāng)用戶單擊 UI 上的按鈕時(shí)，我們的前端 javascript 代碼會(huì)觸發(fā)一個(gè)事件 ( buttonState)

這將執(zhí)行上面的代碼。

首先，我們將更新buttonState變量，然后獲取該值并將其發(fā)送給所有其他客戶端，除了使用它的來(lái)源socket.broadcast.emit('buttonState', value);

我們需要在指定的端口（4001在本地）上提供我們的 express 應(yīng)用程序，這段代碼正是這樣做的。

UI 代碼演練

我們的 UI 代碼駐留在src/ui文件夾中。

您將看到三個(gè)文件，index.htmlindex.js并且style.css

HTML 和 CSS 文件非?；?，它只包含按鈕和樣式。

那么讓我們看一下JS文件。

我們需要初始化socket.io對(duì)象，這是通過(guò)調(diào)用io()函數(shù)來(lái)完成的。

const socket = io();

我們需要使用 JS 獲取按鈕元素，以便我們可以為其附加事件監(jiān)聽器。

const toggleBtn = document.getElementById('toggleBtn');

我們將聲明一個(gè)名為的變量buttonState，它代表 UI 中按鈕的狀態(tài)，當(dāng)用戶單擊該按鈕時(shí)，我們將翻轉(zhuǎn)該變量的值。

現(xiàn)在我們將附加一個(gè)點(diǎn)擊事件并監(jiān)聽這些按鈕點(diǎn)擊。

toggleBtn.addEventListener('click', () => {
    buttonState = !buttonState;
    updateUI();
    socket.emit('buttonState', buttonState);
});

如果它是真的，我們將否定變量值然后它變成假的。buttonState反之亦然。

然后我們調(diào)用該updateUI()函數(shù)（我們稍后會(huì)看一下這個(gè)函數(shù)）

到目前為止，我們的更改是在 UI 本身上進(jìn)行的，服務(wù)器并不知道它。

我們需要告訴我們的服務(wù)器關(guān)于新的更新，為此我們將使用

socket.emit('buttonState', buttonState)功能。

這將告知服務(wù)器我們 UI 的更改，服務(wù)器會(huì)將此更改廣播給其他客戶端。

當(dāng)用戶單擊按鈕時(shí)，根據(jù)狀態(tài)，它的顏色和文本會(huì)發(fā)生變化。

如果按鈕關(guān)閉，那么它將是紅色的，當(dāng)它打開時(shí)它將是綠色的。

updateUI負(fù)責(zé)此更改。

const updateUI = () => {
    buttonState
        ? toggleBtn.classList.add('on')
        : toggleBtn.classList.remove('on');
    toggleBtn.innerText = buttonState ? 'Turn off' : 'Turn on';
};

如果 的值為toggleBtntrue 則我們添加一個(gè) CSS 類，on否則我們將其刪除。這個(gè)類負(fù)責(zé)顏色。

我們還根據(jù)值更改按鈕內(nèi)的文本。

如果您npm run dev在終端中運(yùn)行命令并localhost:4001在瀏覽器中打開，您應(yīng)該能夠看到我們的應(yīng)用程序 UI。

如果您在多個(gè)選項(xiàng)卡中打開相同的地址，您可以看到當(dāng)您單擊另一個(gè)選項(xiàng)卡上的按鈕時(shí)，一個(gè)選項(xiàng)卡中的 UI 會(huì)自動(dòng)更新。

部署服務(wù)器

我們的應(yīng)用程序正在運(yùn)行，但它在我們的本地機(jī)器上，我們需要部署它以便它可以在互聯(lián)網(wǎng)上的任何地方使用。

我們將使用一個(gè)名為Heroku的平臺(tái)來(lái)托管我們的應(yīng)用程序。

從 Heroku 創(chuàng)建一個(gè)免費(fèi)帳戶：https ://signup.heroku.com/dc

heroku cli從https://devcenter.heroku.com/articles/heroku-cli安裝

我們將使用此命令行實(shí)用程序來(lái)管理我們的應(yīng)用程序。

通過(guò)在終端中鍵入命令，確保git和 Heroku 已成功安裝在您的計(jì)算機(jī)上。heroku

現(xiàn)在 CLI 不知道您創(chuàng)建的帳戶，要連接您的 CLI 和帳戶，請(qǐng)heroku login在終端中鍵入，這將打開一個(gè)瀏覽器窗口，您可以從中登錄到您的 Heroku 帳戶。

heroku login
heroku: Press any key to open up the browser to login or q to exit
 ?   Warning: If browser does not open, visit
 ?   https://cli-auth.heroku.com/auth/browser/***
heroku: Waiting for login...
Logging in... done
Logged in as me@example.com

現(xiàn)在讓我們?cè)谖覀兊?Heroku 帳戶上創(chuàng)建一個(gè)應(yīng)用程序

heroku create

這將創(chuàng)建一個(gè) Heroku 應(yīng)用程序，我們可以在其中托管我們的代碼。

heroku create
Creating sharp-rain-871... done, stack is heroku-18
http://sharp-rain-871.herokuapp.com/ | https://git.heroku.com/sharp-rain-871.git
Git remote heroku added

將我們的代碼部署到 Heroku 非常簡(jiǎn)單，我們可以使用一個(gè)命令來(lái)完成。

git push heroku main

此命令執(zhí)行完畢后，我們的代碼將部署到互聯(lián)網(wǎng)上。

git push heroku main
Counting objects: 488, done.
Delta compression using up to 8 threads.
.
.
.
.
remote: Verifying deploy... done.
To https://git.heroku.com/nameless-savannah-4829.git
 * [new branch]      main -> main

為確保我們的應(yīng)用程序至少有一個(gè)實(shí)例正在運(yùn)行，請(qǐng)運(yùn)行以下命令：

heroku ps:scale web=1

要打開我們的 Web 應(yīng)用程序，請(qǐng)運(yùn)行heroku open，這將在瀏覽器中打開我們應(yīng)用程序的 URL。

您應(yīng)該可以從互聯(lián)網(wǎng)上的任何地方打開它。

如果您從另一臺(tái)設(shè)備打開此 URL，您可以看到 UI 在您單擊另一臺(tái)設(shè)備上的按鈕時(shí)實(shí)時(shí)更新。

硬件代碼

現(xiàn)在我們將使用 Arduino IDE 對(duì) ESP8266 微控制器進(jìn)行編碼。

確保您已經(jīng)在 Arduino IDE 上安裝了ESP8266 核心和必要的庫(kù)。

該項(xiàng)目所需的庫(kù)：

• ArduinoJson
• arduinoWebSockets

在 Arduino IDE 上打開文件。firmware/firmware.io

您必須稍微自定義此代碼。

#define SSID "Your WiFi SSID"
#define PASSWORD "Your WiFi password"
#define SERVER "esp-socket-switch.herokuapp.com"  // Server URL (without )

SSID是您的 WiFi 名稱，PASSWORD是您的 wifi 密碼。

您需要復(fù)制鍵入時(shí)獲得的 URLheroku open并將其粘貼為SERVER.

確保URL 中沒(méi)有。

我們需要?jiǎng)?chuàng)建一個(gè) SocketIOclient 類的對(duì)象

SocketIOclient socketIO;

該對(duì)象將管理我們 MCU 上的 WebSocket 連接。

現(xiàn)在讓我們看一下setup函數(shù)，這里我們將連接到 WiFi，注冊(cè)輸出引腳和Socket.IO事件處理程序。

為了簡(jiǎn)單起見(jiàn)，我將使用 NodeMCU 的板載 LED，如果需要，您可以連接一個(gè)外部 LED。

PS：NodeMCU 上的板載 LED 是倒置的，即當(dāng)引腳為低電平時(shí)它會(huì)亮起。

pinMode(LED_BUILTIN, OUTPUT);
Serial.begin(9600);

希望每個(gè)人都熟悉這段代碼的作用，我們將我們的引腳設(shè)置為輸出并設(shè)置串口連接的波特率。

現(xiàn)在我們將調(diào)用setupWiFi() 函數(shù)，它將 MCU 連接到您指定的 WiFi SSID。

接下來(lái)的兩行與Socket.IO有關(guān)

socketIO.begin(SERVER, 80, "/socket.io/?EIO=4");
socketIO.onEvent(socketIOEvent);

在這里我們將嘗試連接到 WebSocket 服務(wù)器，并注冊(cè)Socket.IO事件處理程序。

socketIOEvent是我們的事件處理函數(shù)，現(xiàn)在讓我們看一下。

void socketIOEvent(socketIOmessageType_t type, uint8_t* payload, size_t length) {
  switch (type) {
    case sIOtype_DISCONNECT:
      Serial.println("Disconnected!");
      break;

    case sIOtype_CONNECT:
      Serial.printf("Connected to url: %s%s\\n", SERVER, payload);
      socketIO.send(sIOtype_CONNECT, "/");
      break;

    case sIOtype_EVENT:
      messageHandler(payload);
      break;
  }
}

在這個(gè)函數(shù)中，你可以看到一個(gè) switch 語(yǔ)句，我們現(xiàn)在甚至沒(méi)有使用連接和斷開連接。

但是對(duì)于 sIOtype_EVENT事件，我們正在調(diào)用messageHandler函數(shù)，它會(huì)解析事件數(shù)據(jù)。

void messageHandler(uint8_t* payload) {
  StaticJsonDocument<64> doc;

  DeserializationError error = deserializeJson(doc, payload);

  if (error) {
    Serial.println(error.f_str());
    return;
  }

  String messageKey = doc[0];
  bool value = doc[1];

  if (messageKey == "buttonState") {
    digitalWrite(LED_BUILTIN, value);
  }
}

在此消息處理程序中，我們嘗試解析隨事件收到的 JSON 數(shù)據(jù)。

解析后的數(shù)據(jù)將在doc變量中，doc[0]將包含事件名稱并doc[1]具有值。

如果密鑰是，buttonState那么我們會(huì)將引腳狀態(tài)切換為從服務(wù)器獲得的值。

現(xiàn)在，當(dāng)我們單擊 UI 上的按鈕時(shí)，LED 應(yīng)該打開和關(guān)閉。

我希望這個(gè)小教程能幫助您學(xué)到新東西。