Adafruit Huzzah32 ESP32 WebSocket and WebServer on the same port

Question

I have a Adafruit Huzzah32. I am using wifi as the transport.

I am trying to get the WebServer and WebSocket to work together. Is there any example of this?

I have tried a couple different libraries, but none of them seem to do both server pages and WS socket handling on the same port.

I can set them up separately, but then I have to use 2 different ports and I would like them to be on the same port.

score 1 · Answer 1 · answered Mar 12 '23 at 03:13

This is possible! Can be done with the ESPAsyncWebServer. https://github.com/me-no-dev/ESPAsyncWebServer#why-should-you-care

#include <AsyncEventSource.h>
#include <AsyncJson.h>
#include <AsyncWebSocket.h

#include <AsyncWebSynchronization.h>
#include <ESPAsyncWebSrv.h>
#include <SPIFFSEditor.h>
#include <StringArray.h>
#include <WebAuthentication.h>
#include <WebHandlerImpl.h>
#include <WebResponseImpl.h>
#include <WiFi.h>


const char* ssid = "";
const char* password = "";


AsyncWebServer server(80);
AsyncWebSocket ws("/ws");

int counter = 0;

void initWebServer() {
  server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
    String html = "<html><body><h1>Hello World</h1>";

    html += "<button type='submit'>Increment Counter</button>";
    html += "</form>";
    // Add script tag with WebSocket code
    html += "<script>var ws = new WebSocket('ws://' + window.location.host + '/ws');";
    html += "ws.onopen = function(event) { console.log('WebSocket connected.'); };</script>";
    html += "</body></html>";
    request->send(200, "text/html", html);
  });

  server.on("/increment", HTTP_POST, [](AsyncWebServerRequest *request){
    counter++;
    request->redirect("/");
  });

  ws.onEvent([](AsyncWebSocket *server, AsyncWebSocketClient *client, AwsEventType type, void *arg, uint8_t *data, size_t len){
    if(type == WS_EVT_CONNECT){
      Serial.println("WebSocket client connected");
      client->text("Hello, Client!");
    }
    else if(type == WS_EVT_DISCONNECT){
      Serial.println("WebSocket client disconnected");
    }
    else if(type == WS_EVT_DATA){
      Serial.print("WebSocket client message received: ");
      Serial.write(data, len);
      Serial.println();
      client->text("Echo: " + String((char*)data));
    }
  });

  server.addHandler(&ws);

  server.begin();
  Serial.println("Web server started");
}

void setup() {
  Serial.begin(115200);
  WiFi.begin(ssid, password);
  while (WiFi.status() != WL_CONNECTED) {
    delay(1000);
    Serial.println("Connecting to WiFi...");
  }
  Serial.println("WiFi connected");
  initWebServer();
}

void loop() {
}

How can the TCP port be verified for a websocket? – ryanwebjackson Mar 19 '23 at 16:29 — ryanwebjackson, Mar 19 '23 at 16:29

score 0 · Answer 2 · answered Jan 26 '19 at 02:05

0

What you're asking for doesn't make any sense.

Port numbers uniquely identify the service using the TCP connection. They determine how the connection's data is handled. You can't have two different things using one port because the port number is what's used to distinguish between them.

What is it that you're actually trying to accomplish by trying to use the same port number?

answered Jan 26 '19 at 02:05

romkey

6,218
3
16
12

I used a RPi to prototype this project. On that platform I used a web server called Tornado. It provided HTTP hosting and WS at the same time on the same port. I just started the Tornado server on port 80 or 8080 or whatever port I wanted and the web app that we had created was served up on that port and all the Web Sockets also came over that same port. I think the port is tied to the passing of data back and forth and then a higher level parses the HTTP or WS requests and responses. That is what I was hoping for. – user856232 Jan 26 '19 at 21:44
This is more of a comment than an answer. – ryanwebjackson Mar 19 '23 at 16:29

Adafruit Huzzah32 ESP32 WebSocket and WebServer on the same port

2 Answers2