This repository has been archived by the owner on Jan 29, 2023. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 4
/
Websocket-Chat.ino
327 lines (277 loc) · 10.8 KB
/
Websocket-Chat.ino
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
/**
Example for the ESP32 HTTP(S) Webserver
IMPORTANT NOTE:
To run this script, you need to
1) Enter your WiFi SSID and PSK below this comment
2) Make sure to have certificate data available. You will find a
shell script and instructions to do so in the library folder
under extras/
This script will install an HTTPS Server on your ESP32 with the following
functionalities:
- Show a chat interface on the root node /
- Use a websocket to allow multiple clients to pass messages to each other
*/
#include <sstream>
// TODO: Configure your WiFi here
#define WIFI_SSID "<your ssid goes here>"
#define WIFI_PSK "<your pre-shared key goes here>"
// Max clients to be connected to the chat
#define MAX_CLIENTS 4
// Include certificate data (see note above)
#include "cert.h"
#include "private_key.h"
// We will use wifi
#include <WiFi.h>
#include <HTTPS_Server_Generic.h>
// The HTTPS Server comes in a separate namespace. For easier use, include it here.
using namespace httpsserver;
// Create an SSL certificate object from the files included above ...
SSLCert cert = SSLCert(
example_crt_DER, example_crt_DER_len,
example_key_DER, example_key_DER_len
);
// ... and create a server based on this certificate.
// The constructor has some optional parameters like the TCP port that should be used
// and the max client count. For simplicity, we use a fixed amount of clients that is bound
// to the max client count.
HTTPSServer secureServer = HTTPSServer(&cert, 443, MAX_CLIENTS);
// Declare some handler functions for the various URLs on the server
// The signature is always the same for those functions. They get two parameters,
// which are pointers to the request data (read request body, headers, ...) and
// to the response data (write response, set status code, ...)
void handleRoot(HTTPRequest * req, HTTPResponse * res);
void handle404(HTTPRequest * req, HTTPResponse * res);
// As websockets are more complex, they need a custom class that is derived from WebsocketHandler
class ChatHandler : public WebsocketHandler
{
public:
// This method is called by the webserver to instantiate a new handler for each
// client that connects to the websocket endpoint
static WebsocketHandler* create();
// This method is called when a message arrives
void onMessage(WebsocketInputStreambuf * input);
// Handler function on connection close
void onClose();
};
// Simple array to store the active clients:
ChatHandler* activeClients[MAX_CLIENTS];
void setup()
{
// Initialize the slots
for (int i = 0; i < MAX_CLIENTS; i++)
activeClients[i] = nullptr;
// For logging
Serial.begin(115200);
while (!Serial && millis() < 5000);
///////////////////////////////////////////////
Serial.print("\nStarting Websocket-Chat on ");
Serial.println(ARDUINO_BOARD);
Serial.println(HTTPS_SERVER_GENERIC_VERSION);
///////////////////////////////////
// Connect to WiFi
Serial.println("Setting up WiFi");
WiFi.begin(WIFI_SSID, WIFI_PSK);
while (WiFi.status() != WL_CONNECTED)
{
Serial.print(".");
delay(500);
}
///////////////////////////////////
Serial.print(F("HTTPS WiFiWebServer is @ IP : "));
Serial.println(WiFi.localIP());
Serial.print(F("To access, use https://"));
Serial.println(WiFi.localIP());
///////////////////////////////////////////////
// For every resource available on the server, we need to create a ResourceNode
// The ResourceNode links URL and HTTP method to a handler function
ResourceNode * nodeRoot = new ResourceNode("/", "GET", &handleRoot);
ResourceNode * node404 = new ResourceNode("", "GET", &handle404);
// Add the root node to the server
secureServer.registerNode(nodeRoot);
// The websocket handler can be linked to the server by using a WebsocketNode:
// (Note that the standard defines GET as the only allowed method here,
// so you do not need to pass it explicitly)
WebsocketNode * chatNode = new WebsocketNode("/chat", &ChatHandler::create);
// Adding the node to the server works in the same way as for all other nodes
secureServer.registerNode(chatNode);
// Finally, add the 404 not found node to the server.
// The path is ignored for the default node.
secureServer.setDefaultNode(node404);
Serial.println("Starting server...");
secureServer.start();
if (secureServer.isRunning())
{
Serial.print("Server ready. Open the following URL in multiple browser windows to start chatting: https://");
Serial.println(WiFi.localIP());
}
}
void loop()
{
// This call will let the server do its work
secureServer.loop();
// Other code would go here...
delay(1);
}
void handle404(HTTPRequest * req, HTTPResponse * res)
{
// Discard request body, if we received any
// We do this, as this is the default node and may also server POST/PUT requests
req->discardRequestBody();
// Set the response status
res->setStatusCode(404);
res->setStatusText("Not Found");
// Set content type of the response
res->setHeader("Content-Type", "text/html");
// Write a tiny HTTP page
res->println("<!DOCTYPE html>");
res->println("<html>");
res->println("<head><title>Not Found</title></head>");
res->println("<body><h1>404 Not Found</h1><p>The requested resource was not found on this server.</p></body>");
res->println("</html>");
}
// In the create function of the handler, we create a new Handler and keep track
// of it using the activeClients array
WebsocketHandler * ChatHandler::create()
{
Serial.println("Creating new chat client!");
ChatHandler * handler = new ChatHandler();
for (int i = 0; i < MAX_CLIENTS; i++)
{
if (activeClients[i] == nullptr)
{
activeClients[i] = handler;
break;
}
}
return handler;
}
// When the websocket is closing, we remove the client from the array
void ChatHandler::onClose()
{
for (int i = 0; i < MAX_CLIENTS; i++)
{
if (activeClients[i] == this)
{
activeClients[i] = nullptr;
}
}
}
// Finally, passing messages around. If we receive something, we send it to all
// other clients
void ChatHandler::onMessage(WebsocketInputStreambuf * inbuf)
{
// Get the input message
std::ostringstream ss;
std::string msg;
ss << inbuf;
msg = ss.str();
// Send it back to every client
for (int i = 0; i < MAX_CLIENTS; i++)
{
if (activeClients[i] != nullptr)
{
activeClients[i]->send(msg, SEND_TYPE_TEXT);
}
}
}
// The following HTML code will present the chat interface.
void handleRoot(HTTPRequest * req, HTTPResponse * res)
{
res->setHeader("Content-Type", "text/html");
res->print(
"<!DOCTYPE HTML>\n"
"<html>\n"
" <head>\n"
" <title>ESP32 Chat</title>\n"
"</head>\n"
"<body>\n"
" <div style=\"width:500px;border:1px solid black;margin:20px auto;display:block\">\n"
" <form onsubmit=\"return false\">\n"
" Your Name: <input type=\"text\" id=\"txtName\" value=\"ESP32 user\">\n"
" <button type=\"submit\" id=\"btnConnect\">Connect</button>\n"
" </form>\n"
" <form onsubmit=\"return false\">\n"
" <div style=\"overflow:scroll;height:400px\" id=\"divOut\">Not connected...</div>\n"
" Your Message: <input type=\"text\" id=\"txtChat\" disabled>\n"
" <button type=\"submit\" id=\"btnSend\" disabled>Send</button>\n"
" </form>\n"
" </div>\n"
" <script type=\"text/javascript\">\n"
" const elem = id => document.getElementById(id);\n"
" const txtName = elem(\"txtName\");\n"
" const txtChat = elem(\"txtChat\");\n"
" const btnConnect = elem(\"btnConnect\");\n"
" const btnSend = elem(\"btnSend\");\n"
" const divOut = elem(\"divOut\");\n"
"\n"
" class Chat {\n"
" constructor() {\n"
" this.connecting = false;\n"
" this.connected = false;\n"
" this.name = \"\";\n"
" this.ws = null;\n"
" }\n"
" connect() {\n"
" if (this.ws === null) {\n"
" this.connecting = true;\n"
" txtName.disabled = true;\n"
" this.name = txtName.value;\n"
" btnConnect.innerHTML = \"Connecting...\";\n"
" this.ws = new WebSocket(\"wss://\" + document.location.host + \"/chat\");\n"
" this.ws.onopen = e => {\n"
" this.connecting = false;\n"
" this.connected = true;\n"
" divOut.innerHTML = \"<p>Connected.</p>\";\n"
" btnConnect.innerHTML = \"Disconnect\";\n"
" txtChat.disabled=false;\n"
" btnSend.disabled=false;\n"
" this.ws.send(this.name + \" joined!\");\n"
" };\n"
" this.ws.onmessage = e => {\n"
" divOut.innerHTML+=\"<p>\"+e.data+\"</p>\";\n"
" divOut.scrollTo(0,divOut.scrollHeight);\n"
" }\n"
" this.ws.onclose = e => {\n"
" this.disconnect();\n"
" }\n"
" }\n"
" }\n"
" disconnect() {\n"
" if (this.ws !== null) {\n"
" this.ws.send(this.name + \" left!\");\n"
" this.ws.close();\n"
" this.ws = null;\n"
" }\n"
" if (this.connected) {\n"
" this.connected = false;\n"
" txtChat.disabled=true;\n"
" btnSend.disabled=true;\n"
" txtName.disabled = false;\n"
" divOut.innerHTML+=\"<p>Disconnected.</p>\";\n"
" btnConnect.innerHTML = \"Connect\";\n"
" }\n"
" }\n"
" sendMessage(msg) {\n"
" if (this.ws !== null) {\n"
" this.ws.send(this.name + \": \" + msg);\n"
" }\n"
" }\n"
" };\n"
" let chat = new Chat();\n"
" btnConnect.onclick = () => {\n"
" if (chat.connected) {\n"
" chat.disconnect();\n"
" } else if (!chat.connected && !chat.connecting) {\n"
" chat.connect();\n"
" }\n"
" }\n"
" btnSend.onclick = () => {\n"
" chat.sendMessage(txtChat.value);\n"
" txtChat.value=\"\";\n"
" txtChat.focus();\n"
" }\n"
" </script>\n"
"</body>\n"
"</html>\n"
);
}