hitsoli.blogg.se - Tabulo blanc

#TABULO BLANC CODE#

When text is entered in a form input on the page, and the return key is stroke, the text of the input field is send through the WebSocket, to the server.

On receiving a message, an element is created with the content of the message and added to the page.

Create a WebSocket connection to the server and wait for messages.

If the name does not exist, then create a new random one.

Retrieve a client name from the cookies.

The client uses the default implementation of the WebSocket standard that is implemented on the browser (good overall support).

serve static assets (html, css, images, js files).

Wait for messages from any client and broadcast the message to all the connected clients.

The WebSocket server will maintain a list of connected WebSocket clients.

Create a WebSocket Server and bind it to the HTTP server.The Webpack dev server is configured to proxy the WebSocket requests to the WS server. The WebSocket server is created atop an HTTP server on a different port than the static assets (html, css, js files) server from Webpack. The Websocket server uses the basic http project plus the ws WebSocket implementation. One for the static contents of the Web app (html, js, css) and one for the WeBSocket management.

#TABULO BLANC CODE#

The application code is two-folded: the server code and the client code. There is no Same-origin policy control and security involved.

The application is a simple group chat, where any connected client receives messages sent by everyone. It focusses on showing the basic mechanisms used to create a bidirectional (full duplex) communication WebSocket. This project was bootstrapped with Create React App.