Websockets

[mirecta]

it is possible add websockets for low latency communications. controlling some car toy etc.

[rjwats]

Hi Mirecta,

Absolutely, this project uses ESPAsyncWebServer which has comprehensive WebSocket support:

https://github.com/me-no-dev/ESPAsyncWebServer#async-websocket-plugin

You'll have to interface with this on the React side of course. I've used a library called sockette for this in the past (there are others of course):

https://www.npmjs.com/package/sockette

My project which used this was RGB lighting controller which synchronised the user interface with changes as the lights may be controlled via IR remote, REST service (Alexa) or WebSockets:

https://github.com/rjwats/esp8266-react/tree/rgb-lightstrip

I may try and provide an example as part of the demo app - though it's not a particularly common use case.

[lorol]

+1 for websockets. @rjwats, any attempt to be added by other developer will look very ugly :), right?
Appreciated an example with live connection in the demo project, say LED live status or so.

[saniyo]

Hi Mirecta,

Absolutely, this project uses ESPAsyncWebServer which has comprehensive WebSocket support:

https://github.com/me-no-dev/ESPAsyncWebServer#async-websocket-plugin

You'll have to interface with this on the React side of course. I've used a library called sockette for this in the past (there are others of course):

https://www.npmjs.com/package/sockette

My project which used this was RGB lighting controller which synchronised the user interface with changes as the lights may be controlled via IR remote, REST service (Alexa) or WebSockets:

https://github.com/rjwats/esp8266-react/tree/rgb-lightstrip

I may try and provide an example as part of the demo app - though it's not a particularly common use case.

Hello, rjwats you did a fantastic job, the idea to provide clear WS example in the new UI (TS) would help a lot. Thanks.

[rjwats]

Looks like this is more common a requirement than I thought!

My first WS integration was designed synchronise UI state when a settings change occurred from another origin. I originally left it out of the core framework because I thought it would be overkill for general use and would confuse things.

I'll try and find time to look at this soon - I think my original implementation could do with some re-working.

[lorol]

Or maybe EventSource (Server-Sent Events) is the better and easier way to do push from server to browser:
https://github.com/me-no-dev/ESPAsyncWebServer#async-event-source-plugin

[mirecta]

I made it in my fork i tried do it clearly RestControler can send event immediatelly. i wrote server side too , i try to use login token "which u dadded to http header " with connect request as uri parameter.
so now if u call some callback the second parameter is boolean sendNow. My immplementation is auto reconnect and cllback from websockets u can implement in Demo controller u know when is connected and when no , also in demo controller u can send and receive message to server

[lorol]

@mirecta
Nice work! but ledcWrite and ledcSetup are missing in your repository,
BTW what is the heap value as reported by the app UI on your fork' esp12 variant?

[rjwats]

Ive not had the chance to look at your fork yet. When I worked with WebSockets before, the framework didn't support authorization so it'll be interesting to see how you've approached this. I'm hoping to get the MQTT integration Ive been working on complete this weekend (it's another much requested feature). I think it makes sense to update the demo app to demonstrate MQTT and WS at the same time. Will see...

…

On Thu, 5 Mar 2020, 23:35 lorol, ***@***.***> wrote: @mirecta <https://github.com/mirecta> Nice work! but ledcWrite and ledcSetup are missing in your repository, BTW what is the heap value as reported by the app UI on your fork' esp12 variant? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#92?email_source=notifications&email_token=AAKE4VEUKD2QGERAVJS5HPLRGAZM3A5CNFSM4KWHNLZ2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEN7IENA#issuecomment-595493428>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAKE4VCBWT7CVAC4ASIL55TRGAZM3ANCNFSM4KWHNLZQ> .

[lorol]

Hi @rjwats
I made the following application by taking parts from here or there.
https://github.com/lorol/ESPAsyncWebServer/tree/master/examples/SmartSwitch
It does what I need and heap of ESP8266 with one client connected is about 39K.
Mostly, all stuff is there.
Do you think I can beautifully redo it one day on your framework and it will continue working?

BTW, what is the expected browser compatibility of esp8266-react. For some reason it doesn't work on an ipad2 mini - Safari 9, not extremely old.

[rjwats]

Browser support should be any modern browser for the build and the most recent browser only when running in development mode (see browserslist section):

https://github.com/rjwats/esp8266-react/blob/master/interface/package.json

It's concerning if it doesn't work in Safari - changing the browser settings in package.json might help with browser support. I am also aware of a problem with the react-scripts package the framework currently uses. This affects Edge under development mode (when running the development server via "npm start"):

facebook/create-react-app#8084

I think upgrading react-scripts to 3.4.0 should fix the Edge issue. For any issue affecting Safari, I think you are probably best off seeing if changing the browserlist configuration fixes any issues you are having.

[rjwats]

I think the framework needs a little re-working to support MQTT and WebSockets cleanly. MQTT may have different serialisation requirements for the same settings, as may WS. WebSockets and MQTT want to observe changes in the settings as well as updae them.

I'm playing around with some ideas to improve this in the framework. I'm thinking of re-working the framework with an observer pattern and bringing "persistence" and "service" out of what is currently called "SettingsService" to make it things modular (it may become a mess otherwise):

I have a work-in-progress branch I'm working on. Let me know your thoughts in the meantime.

[mirecta]

@mirecta
Nice work! but ledcWrite and ledcSetup are missing in your repository,
BTW what is the heap value as reported by the app UI on your fork' esp12 variant?

ledcWrite and ledcSetup is ESP32 PWM specific functions u can replace it with some for ESP12 . it is part of arduino framework

[rjwats]

PR is open which introduces MQTT and WebSockets including an example project which demonstrates the new features:

Feature Branch: https://github.com/rjwats/esp8266-react/tree/ft-mqtt-websockets

PR: #102

I'd be very interested in feedback before I push this change to master as it's a fairly significant diversion for the core of the framework. The change makes the framework more event orientated and factors out the serializer concept from the core classes so data can be serialized in a different ways for different use-cases (I found home assistant usually wanted a different format to the REST endpoints, especially with auto-discovery - it's quite prescriptive).

I think it represents a positive change and provides better internal decoupling (SOLID), but I would love some comments if anyone who's had experience with the framework has time to have a mess around with it.

[rjwats]

Work complete on WebSocket support and example.