Websocket
WebSoket là công nghệ hỗ trợ giao tiếp hai chiều giữa client và server bằng cách sử dụng một TCP socket để tạo một kết nối liên tục, hiệu quả và ít tốn kém. Mặc dù được thiết kế để chuyên sử dụng cho các ứng dụng web, lập trình viên vẫn có thể đưa chúng vào bất kì loại ứng dụng nào.
WebSockets mới xuất hiện trong HTML5, cho phép các kênh giao tiếp song song hai chiều và hiện đã được hỗ trợ trong nhiều trình duyệt. Kết nối được mở thông qua một HTTP request (yêu cầu HTTP), với những header đặc biệt thông báo cho Server (có hỗ trợ) chuyển sang kết nối Websocket. Kết nối này được duy trì để bạn có thể gởi và nhận dữ liệu một cách liên tục, không đứt quãng, và không cần bất kỳ HTTP header (overhead) nào nữa.
Websocket hỗ trợ cho các trình duyệt phổ biến hiện nay như: Google Chrome, Microsoft Edge, Internet Explorer, Firefox, Safari và Opera.
Ưu điểm
WebSockets cung cấp khả năng giao tiếp hai chiều với kết nối được duy trì, có độ trễ thấp, giúp Server dễ dàng giao tiếp với Client. Do đó, websocket sẽ phù hợp cho các ứng dụng real-time, người dùng sẽ không mất thời gian phải reload lại trình duyệt để cập nhật thông tin mới nhất như khi sử dụng giao thức HTTP.
Nhược điểm
Giao thức Websocket chưa được tất cả các trình duyệt đã có hiện nay hỗ trợ. Websocket cũng đòi hỏi các ứng dụng web trên server để hỗ trợ nó.
Sử dụng ESP8266 như Websocket Server
Trong phần này, chúng ta sẽ thiết lập ứng dụng sử dụng ESP8266 như 1 Websocket Server và Trình duyệt như là một Web Socket Client để cập nhật trạng thái nút nhấn, cũng như điều khiển đèn LED trên board thời gian thực thông qua Trình duyệt.
Yêu cầu
-
Khởi động 1 Webserver (có hỗ trợ Websocket) trên chip ESP8266.
-
Khi truy cập vào địa chỉ IP của ESP8266 sẽ trả về 1 file HTML bao gồm nội dung của đoạn Javascript thiết lập kết nối Websocket đến ESP8266 đồng thời lắng nghe các gói tin từ ESP8266 Server.
-
Khi nhấn nút trên board ESP8266 sẽ gởi nội dung trạng thái nút nhất đến Web Browser hiển thị dạng hộp kiểm (checkbox), nhấn nút là có kiểm, không nhấn nút là không có kiểm.
-
Đồng thời khi nhấn hộp kiểm trên trình duyệt sẽ thay đổi trạng thái đèn LED trên board ESP8266.
Chuẩn bị
Cài đặt thư viện:
Giới thiệu về thư viện ESPAsyncWebServer
Thư viện ESPAsyncWebServer dùng cho việc thiết lập HTTP server và websocket server cho module ESP8266, và xử lí các sự kiện trên server-client.
Để các chương trình dùng thư viện ESPAsyncWebserver hoat động, ta cần dùng thêm thư viện ESPAsyncTCP.
Đoạn code Javascript để tạo kết nối Web Socket
//Trình tự mở một websocket cơ bản:
var ws = new WebSocket('ws://domain.com:8000/'); // mở 1 websocket
ws.onopen = function() //
{
// sự kiện khi websocket được mở thành công
};
ws.onmessage = function(evt)
{
// sự kiện xảy ra khi client nhận dữ liệu từ server
};
ws.onclose = function() {
// sự kiện khi websocket bị đóng
};Nhúng file HTML chứa đoạn code JS vào ESP8266
<!DOCTYPE HTML>
<html>
<head>
<title>ESP8266 WebSocket</title>
</head>
<body>
<div> Webscoket status <span id="status" style="font-weight: bold;"> disconnected </span> </div>
<div> ESP8266 Button Status <input type="checkbox" id="btn" name="btn" /> </div>
<div> Control LED <input type="checkbox" id="led" name="led" disabled="true" /> </div>
<script type="text/javascript">
var button = document.getElementById('btn');
var led = document.getElementById('led');
var url = window.location.host; // hàm trả về url của trang hiện tại kèm theo port
var ws = new WebSocket('ws://' + url + '/ws'); // mở 1 websocket với port 8000
ws.onopen = function() //khi websocket được mở thì hàm này sẽ được thưc hiện
{
document.getElementById('status').innerHTML = 'Connected';
led.disabled = false; //khi websocket được mở, mới cho phép
};
ws.onmessage = function(evt) // sự kiện xảy ra khi client nhận dữ liệu từ server
{
if(evt.data == 'BTN_PRESSED') {
button.checked = true;
} else if(evt.data == 'BTN_RELEASE') {
button.checked = false;
}
};
ws.onclose = function() { // hàm này sẽ được thực hiện khi đóng websocket
led.disabled = true;
document.getElementById('status').innerHTML = 'Disconnected';
};
led.onchange = function() { // thực hiện thay đổi bật/tắt led
var status = 'LED_OFF';
if (led.checked) {
status = 'LED_ON';
}
ws.send(status)
}
</script>
</body>
</html>Chương trình hoàn chỉnh cho ESP8266
#include <ESP8266WiFi.h>
#include <ESPAsyncWebServer.h>
const char* ssid = "******";
const char* password = "*********";
const int LED = 16;
const int BTN = 0;
// để đưa đoạn code HTML vào chương trình Arduino, cần chuyển đổi code HTML sang dạng char
const char index_html[] PROGMEM = ""
"<!DOCTYPE HTML>"
"<html>"
"<head>"
" <title>ESP8266 WebSocket</title>"
"</head>"
"<body>"
" <div> Webscoket status <span id=\"status\" style=\"font-weight: bold;\"> disconnected </span> </div>"
" <div> ESP8266 Button Status <input type=\"checkbox\" id=\"btn\" name=\"btn\" /> </div>"
" <div> Control LED <input type=\"checkbox\" id=\"led\" name=\"led\" disabled=\"true\" /> </div>"
" <script type=\"text/javascript\">"
" var button = document.getElementById('btn');"
" var led = document.getElementById('led');"
" var status = document.getElementById('status');"
" var url = window.location.host;"
" var ws = new WebSocket('ws://' + url + '/ws');"
" ws.onopen = function()"
" {"
" status.text = 'Connected';"
" led.disabled = false;"
" };"
" ws.onmessage = function(evt)"
" {"
" if(evt.data == 'BTN_PRESSED') {"
" button.checked = true;"
" } else if(evt.data == 'BTN_RELEASE') {"
" button.checked = false;"
" }"
" };"
" ws.onclose = function() {"
" led.disabled = true;"
" status.text = 'Disconnected';"
" };"
" led.onchange = function() {"
" var status = 'LED_OFF';"
" if (led.checked) {"
" status = 'LED_ON';"
" }"
" ws.send(status)"
" }"
" </script>"
"</body>"
"</html>";
AsyncWebServer server(8000);
AsyncWebSocket ws("/ws");
// Hàm xử lí sự kiện trên Server khi client là browser phát sự kiện
void onWsEvent(AsyncWebSocket * server, AsyncWebSocketClient * client, AwsEventType type, void * arg, uint8_t *data, size_t len) {
if (type == WS_EVT_DATA && len > 0) { // type: loại sự kiện mà server nhận được. Nếu sự kiện nhận được là từ websocket thì bắt đầu xử lí
data[len] = 0;
String data_str = String((char*)data); // ép kiểu, đổi từ kiểu char sang String
if (data_str == "LED_ON") {
digitalWrite(LED, 0); // Khi client phát sự kiện "LED_ON" thì server sẽ bật LED
} else if (data_str == "LED_OFF") {
digitalWrite(LED, 1); // Khi client phát sự kiện "LED_OFF" thì server sẽ tắt LED
}
}
}
void setup()
{
pinMode(LED, OUTPUT);
pinMode(BTN, INPUT);
Serial.begin(115200);
Serial.setDebugOutput(true);
WiFi.mode(WIFI_AP_STA);
WiFi.begin(ssid, password);
if (WiFi.waitForConnectResult() != WL_CONNECTED) {
Serial.printf("STA: Failed!\n");
WiFi.disconnect(false);
delay(1000);
WiFi.begin(ssid, password);
}
ws.onEvent(onWsEvent); // gọi hàm onWsEvent
server.addHandler(&ws);
server.on("/", HTTP_GET, [](AsyncWebServerRequest * request) {
request->send_P(200, "text/html", index_html); // trả về file index.html trên giao diện browser khi browser truy cập vào IP của server
});
server.begin(); // khởi động server
}
void loop()
{
static bool isPressed = false;
if (!isPressed && digitalRead(BTN) == 0) { //Nhấn nút nhấn GPIO0
isPressed = true;
ws.textAll("BTN_PRESSED");
} else if (isPressed && digitalRead(BTN)) { //Nhả nút nhấn GPIO0
isPressed = false;
ws.textAll("BTN_RELEASE");
}
}Nạp chương trình cho board NodeMCU.
Kết quả
Sau khi biên dịch xong code trên Arduino, ta vào browser, truy cập vào địa chỉ IP của ESP8266 đã trả về trên Serial Monitor cùng với port đã thiết lập trên server, ở trường hợp này là 192.168.1.65:8000
Sử dụng ESP8266 như Websocket Client
Trong một số ứng dụng khác, chúng ta có 1 Server Websocket để thực hiện các tác vụ thời gian thực như Ứng dụng điện thoại, trình duyệt Web. Thì ESP8266 có thể kết nối trực tiếp vào các server này như 1 Websocket Client để tiếp nhận, hoặc gởi thông tin thông qua Websocket.
Một số dịch vụ sử dụng Websocket điển hình như dịch vụ tin nhắn Slack, dịch vụ cơ sở dữ liệu thời gian thực Firebase
Ở phần này, chúng ta sẽ sử dụng Node.js để tự xây dựng 1 Web server, vừa đóng vai trò là 1 Websocket Server. Có những tính năng:
-
Có thể cung cấp file
index.htmlchứa các đoạn mã javascript tạo kết nối Websocket giữa trình duyệt với Server. -
Cho phép kết nối Websocket đến, bao gồm từ trình duyệt, hay từ ESP8266
-
Server sẽ broadcast tất cả các gói tin từ bất kỳ 1 client nào gởi đến, tới tất cả các client còn lại.
Với tính năng như trên thì bạn có thể hình dung như sau: Nếu 1 cửa sổ trình duyệt có kết nối Websocket đến Server, khi nhấn 1 nút kiểm, thì sẽ gởi về server trạng thái của nút kiểm đó. Ví dụ LED_ON, server nhận được sẽ gởi dữ liệu LED_ON đến các trình duyệt còn lại (hoặc bao gồm cả ESP8266), và trình duyệt còn lại sẽ hiển thị trạng thái nút kiểm này đang bật.
Javascript Websocket Client trên trình duyệt
Với file index.html có chứa mã nguồn Javascript tạo kết nối đến Websocket, để cùng thư mục với file server.js
<!DOCTYPE HTML>
<html>
<head>
<title>ESP8266 WebSocket</title>
</head>
<body>
<div> Webscoket status <span id="status" style="font-weight: bold;"> disconnected </span> </div>
<div> ESP8266 Button Status <input type="checkbox" id="btn" name="btn" /> </div>
<div> Control LED <input type="checkbox" id="led" name="led" disabled="true" /> </div>
<script type="text/javascript">
var button = document.getElementById('btn');
var led = document.getElementById('led');
var url = window.location.host; // hàm trả về url của trang hiện tại kèm theo port
var ws = new WebSocket('ws://' + url + '/ws'); // mở 1 websocket với port 8000
console.log('connecting...')
ws.onopen = function() //khi websocket được mở thì hàm này sẽ được thưc hiện
{
document.getElementById('status').innerHTML = 'Connected';
led.disabled = false; //khi websocket được mở, mới cho phép
console.log('connected...')
};
ws.onmessage = function(evt) // sự kiện xảy ra khi client nhận dữ liệu từ server
{
console.log(evt.data)
if(evt.data == 'BTN_PRESSED') {
button.checked = true;
} else if(evt.data == 'BTN_RELEASE') {
button.checked = false;
} else if(evt.data == 'LED_OFF') {
led.checked = false;
} else if(evt.data == 'LED_ON') {
led.checked = true;
}
};
ws.onclose = function() { // hàm này sẽ được thực hiện khi đóng websocket
led.disabled = true;
document.getElementById('status').innerHTML = 'Connected';
};
led.onchange = function() { // thực hiện thay đổi bật/tắt led
var led_status = 'LED_OFF';
if (led.checked) {
led_status = 'LED_ON';
}
ws.send(led_status)
}
</script>
</body>
</html>Node.js Websocket Server
Trong phần này chúng ta cần dùng thư viện Websocket ws github.com/websockets/ws. Bạn có thể cài đặt bằng cách thực thi lệnh:
npm install ws
var fs = require('fs');
var url = require('url');
var http = require('http');
var WebSocket = require('ws');
// function gửi yêu cầu(response) từ phía server hoặc nhận yêu cầu (request) của client gửi lên
function requestHandler(request, response) {
fs.readFile('./index.html', function(error, content) {
response.writeHead(200, {
'Content-Type': 'text/html'
});
response.end(content);
});
}
// create http server
var server = http.createServer(requestHandler);
var ws = new WebSocket.Server({ server });
var clients = [];
function broadcast(socket, data) {
console.log(clients.length);
for(var i=0; i<clients.length; i++) {
if(clients[i] != socket) {
clients[i].send(data);
}
}
}
ws.on('connection', function(socket, req) {
clients.push(socket);
socket.on('message', function(message) {
console.log('received: %s', message);
broadcast(socket, message);
});
socket.on('close', function() {
var index = clients.indexOf(socket);
clients.splice(index, 1);
console.log('disconnected');
});
});
server.listen(8000);
console.log('Server listening on port 8000');ESP8266 Websocket Client
#include <Arduino.h>
#include <ESP8266WiFi.h>
#include <WebSocketsClient.h> //https://github.com/Links2004/arduinoWebSockets
WebSocketsClient webSocket;
const char* ssid = "...";
const char* password = "...";
const int LED = 16;
const int BTN = 0;
void webSocketEvent(WStype_t type, uint8_t * payload, size_t length) {
switch (type) {
case WStype_DISCONNECTED:
Serial.printf("[WSc] Disconnected!\n");
break;
case WStype_CONNECTED:
{
Serial.printf("[WSc] Connected to url: %s\n", payload);
}
break;
case WStype_TEXT:
Serial.printf("[WSc] get text: %s\n", payload);
if(strcmp((char*)payload, "LED_ON") == 0) {
digitalWrite(LED, 0); // Khi client phát sự kiện "LED_ON" thì server sẽ bật LED
} else if(strcmp((char*)payload, "LED_OFF") == 0) {
digitalWrite(LED, 1); // Khi client phát sự kiện "LED_OFF" thì server sẽ tắt LED
}
break;
case WStype_BIN:
Serial.printf("[WSc] get binary length: %u\n", length);
break;
}
}
void setup() {
pinMode(LED, OUTPUT);
pinMode(BTN, INPUT);
Serial.begin(115200);
Serial.println("ESP8266 Websocket Client");
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
delay(500);
Serial.print(".");
}
webSocket.begin("192.168.0.106", 8000);
webSocket.onEvent(webSocketEvent);
}
void loop() {
webSocket.loop();
static bool isPressed = false;
if (!isPressed && digitalRead(BTN) == 0) { //Nhấn nút nhấn GPIO0
isPressed = true;
webSocket.sendTXT("BTN_PRESSED");
} else if (isPressed && digitalRead(BTN)) { //Nhả nút nhấn GPIO0
isPressed = false;
webSocket.sendTXT("BTN_RELEASE");
}
}
Tổng kết
Việc sử dụng giao thức websocket sẽ có nhiều lợi ích cho các kết nối 2 chiều, luôn được duy trì và có độ trễ thấp.
