[WIP] - Websocket data streaming

[kylemath]

Used a simplified version of the code and a single module as a more simple way to test the streaming,

Taking over from closed PR: https://github.com/kylemath/EEGEdu/pull/144

[kylemath]

change ln 223 of pageSwitcher.js to your local IP address

var socket = await io.connect('##.#.#.##:8080');

[kylemath]

Seems to be connecting to the socket now, but still can't seem to access data from terminal with nc, iocat or websocat

[korymath]

Thank you for the simplification.

I am unclear how to reproduce this:

Seems to be connecting to the socket now

What does that mean?

[korymath]

Fixes to build and test socket connections.

Fix: L46 in index.html was calling the socket javascript

<script src="/socket.io/socket.io.js"></script>

We want to use react/node to handle our package calls, especially for the server.

Need to install socket.io

yarn add socket.io

Socket.io allows for allows synchronized communication to take place simply within your app, which means real-time communication!

It is built on WebSockets, which allows synchronized bilateral exchange between the client and the server. WebSocket is an innovation that allows a sort of tube of communication that remains open between the client and the server

That is, the socket requires a server and a client.

Building the Server

The server centralizes and manages the connections of the different clients who are connected to the website

Building the Client

The client connects to the server and displays results in the browser.

References: https://github.com/socketio/socket.io/issues/3342#issuecomment-451052828 https://stackoverflow.com/questions/52616766/socket-io-module-not-found-cant-resolve-uws-in-c-node-modules-engine https://github.com/socketio/socket.io https://www.valentinog.com/blog/socket-react/ https://openclassrooms.com/en/courses/2504541-ultra-fast-applications-using-node-js/2505653-socket-io-let-s-go-to-real-time

[korymath]

As per: https://socket.io/get-started/chat/ and yeet example, let's move to express. More complex server, means we have to migrate from create-react-app to express.

Install express

yarn add express

Edit the package.json so that the start script runs node and not react-scripts

"start": "node server.js",

Then rebuild the site. Note, with express we will have to rebuild each time.

yarn build

Then restart the site, and it is running with the explicit express server.

Then we need to integrate Socket.IO to the server code.

https://dev.to/captainpandaz/a-socket-io-tutorial-that-isn-t-a-chat-app-with-react-js-58jh

io.emit('some event', { someProperty: 'some value', otherProperty: 'other value' }); // This will emit the event to all connected sockets

From: https://socket.io/docs/

What Socket.IO is not Socket.IO is NOT a WebSocket implementation. Although Socket.IO indeed uses WebSocket as a transport when possible, it adds some metadata to each packet: the packet type, the namespace and the packet id when a message acknowledgement is needed. That is why a WebSocket client will not be able to successfully connect to a Socket.IO server, and a Socket.IO client will not be able to connect to a WebSocket server either. Please see the protocol specification here.

// WARNING: the client will NOT be able to connect! const client = io('ws://echo.websocket.org');

So, build a simple socketio client to test socket communication. Install the simple python client here: https://github.com/korymath/eegedu_client