Vfrdtyky

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