esp8266 websocket server and sodcket.io client in angular 7

Question

I am using esp8266 to run my websocket server and angular 7 to run socket.io to run websocket client. When I run the angular application. The logs in Arduino shows Disconnected!. I am not sure what is causing this.

following is the angular side code for client.

import * as io from 'socket.io-client';
import { Observable } from 'rxjs/Observable';
import * as Rx from 'rxjs/Rx';
import { environment } from 'src/environments/environment';

@Injectable()
export class SocketServiceService {
  private socket;

  constructor() { }

  connect(): Rx.Subject<MessageEvent> {

    this.socket = io('ws://192.168.43.155:81');
    console.log("created server")
    let observable = new Observable(observer => {
        this.socket.on('message', (data) => {
          console.log("Received message from Websocket Server")
          observer.next(data);
        })
        return () => {
          this.socket.disconnect();
        }
    });
    let observer = {
        next: (data: Object) => {
            this.socket.emit('message', JSON.stringify(data));
            console.log("msg emited"+ data);
        },
    };
    return Rx.Subject.create(observer, observable);
  }

}

this is esp8266 code

#include <Arduino.h>

#include <ESP8266WiFi.h>
#include <ESP8266WiFiMulti.h>
#include <WebSocketsServer.h>
#include <Hash.h>

ESP8266WiFiMulti WiFiMulti;

WebSocketsServer webSocket = WebSocketsServer(81);

#define USE_SERIAL Serial1

void webSocketEvent(uint8_t num, WStype_t type, uint8_t * payload, size_t length) {

    switch(type) {
        case WStype_DISCONNECTED:
            USE_SERIAL.printf("[%u] Disconnected!\n", num);
            break;
        case WStype_CONNECTED:
            {
                IPAddress ip = webSocket.remoteIP(num);
                USE_SERIAL.printf("[%u] Connected from %d.%d.%d.%d url: %s\n", num, ip[0], ip[1], ip[2], ip[3], payload);

                webSocket.sendTXT(num, "Connected");
            }
            break;
        case WStype_TEXT:
            USE_SERIAL.printf("[%u] get Text: %s\n", num, payload);

            break;
        case WStype_BIN:
            USE_SERIAL.printf("[%u] get binary length: %u\n", num, length);
            hexdump(payload, length);
            break;
    }

}

void setup() {
    USE_SERIAL.begin(115200);

    USE_SERIAL.setDebugOutput(true);

    USE_SERIAL.println();
    USE_SERIAL.println();
    USE_SERIAL.println();

    for(uint8_t t = 4; t > 0; t--) {
        USE_SERIAL.printf("[SETUP] BOOT WAIT %d...\n", t);
        USE_SERIAL.flush();
        delay(1000);
    }

    WiFiMulti.addAP("SSID", "passpasspass");

    while(WiFiMulti.run() != WL_CONNECTED) {
        delay(100);
    }

    webSocket.begin();
    webSocket.onEvent(webSocketEvent);
}

void loop() {
    webSocket.loop();
}

please Suggest what might be going wrong, Any pointers will be helpful.

score 0 · Answer 1 · answered Oct 16 '19 at 19:58

It's a lot to ask for someone to actually try to debug this (to do so, I'd have to create an Angular project using your Angular code, and also set up an ESP8266 sketch using your Arduino code), so I'm not going to try, but here's a couple of suggestions:

Try setting up a WebSocket server in Node, using the example code in the socket.io-client documentation. If that works, then you've narrowed the problem down to the ESP8266 code. If it fails in the same way, then you have a problem in your Angular client.
If the problem is in your Angular code, I'd suggest using the rsjx WebSocketSubject class. It gives you a fully configured WebSocket client, works really well, and would eliminate your low-level websocket client code.

Here's an example of connecting to the WebSocket, subscribing to inbound messages, and sending an outbound message:

connect() {
    this.webSocket = webSocket(environment.chatUrl);

    this.subscription = this.webSocket.subscribe(msg => {
      console.log('got message: ' + msg);
    },
    err => {
        this.setDisconnected();
        console.log('err!', err);
    },
      () => {
        console.log('websocket closed'));
        this.setDisconnected();
      }
    );

    this.webSocket.next({
      name: this.name
    });
  }

and here's sending a message:


  sendMessage(msg: string) {
    if (this.connected) {
      this.webSocket.next(msg);
    }
  }

and here's disconnecting:

  private disconnect() {
    if (this.subscription) {
      this.webSocket.complete();
      this.subscription.unsubscribe();
      this.subscription = undefined;
      this.setDisconnected();
    }
  }

esp8266 websocket server and sodcket.io client in angular 7

1 Answers1