Odtnhj

I am new to websockets and just trying to get a handle of how to listen to a message from a client browser from the server and vice-versa.

I'm using a Node.js/Express setup and just want to be able to firstly listen for any messages from the client.

I've been looking at this https://github.com/websockets/ws library and have tried the examples but am not able to get this working within my localhost environment.

I'm also not clear what I need to look out for, when I'm listening for a message.

What code do I use on the client, i.e. url + port and what code do I use on the server?

const WebSocket = require('ws');

const ws = new WebSocket('ws://localhost/path', 
 perMessageDeflate: false
);

Using websockets directly might be troublesome, it's advised you use a framework to abstract this layer, so they can easily fallback to other methods when not supported in the client. For example, this is a direct implementation using Express js and Websockets directly. This example also allows you to use the same server for HTTP calls.

const express = require('express');
const http = require('http');
const WebSocket = require('ws');

const app = express();

//initialize a simple http server
const server = http.createServer(app);

//initialize the WebSocket server instance
const wss = new WebSocket.Server( server );

wss.on('connection', (ws) => 

 //connection is up, let's add a simple simple event
 ws.on('message', (message) => 

 //log the received message and send it back to the client
 console.log('received: %s', message);
 ws.send(`Hello, you sent -> $message`);
 );

 //send immediatly a feedback to the incoming connection 
 ws.send('Hi there, I am a WebSocket server');
);

//start our server
server.listen(3000, () => 
 console.log(`Server started on port $server.address().port :)`);
);

For the client, you can do something like this:

const ws = new WebSocket('ws://localhost:3000')
ws.onopen = () => 
 console.log('ws opened on browser')
 ws.send('hello world')


ws.onmessage = (message) => 
 console.log(`message received`, message.data)

Like i have mentioned above, it is advised that you use a mature framework for websockets. Should your app be minimal and not need scaling, you can use any open source library, with socket.io being the most popular.

However, if you are talking about implementing this to be used at production level, you should know that the open source solutions do not allow for scalability, failover, message ordering etc. In that case, you’ll have to implement a realtime platform as a service tool. Ably’s Data Stream Network is one such solution that I’ve personally used for a lot of my projects.

Just a note, socket.io is a backend/frontend library that uses websocket but also has a number of fallbacks if the client browser does not support websocket. The example below works with ws backend.

Server

const WS = require('ws')

const PORT = process.env.PORT || 8080

const wss = new WS.Server(
 port: PORT
, () => console.log(`ws server live on $PORT`))

const errHandle = (err) => 
 if(err) throw err


wss.on('connection', (socket) => 
 console.log('something connected')

 socket.send('you are connected', errHandle)

 socket.on('message', (data) => 
 console.log(`socket sent $data`)

 socket.send('message received', errHandle)
 )
)

client (browser)

(() => 
 const ws = new WebSocket('ws://localhost:8080')
 ws.onopen = () => 
 console.log('ws opened on browser')
 ws.send('hello world')
 

 ws.onmessage = (message) => 
 console.log(`message received $message`)
 

)()

edit: oh, and ws and http are different protocols. you will need a different server to serve your http files