Welcome folks today in this blog post we will be using the websocketlibrary at the node.js side to stream and send data between the client and the server in browser using javascript. All the full source code of the application is shown below.
Get Started
In order to get started you need to make a new node.js project using the below command as shown below
npm init -y
npm i ws
And after that you need to create the index.js file of the node.js app and copy paste the following code
index.js
|
1 2 3 4 5 6 7 8 9 10 |
const websocket = require('ws') const wss = new websocket.Server({ port:8080 }) wss.on('connection',(ws) => { console.log("A new client is connected") }) |
As you can see we are importing the ws library at the top and then we are starting the websocket server using the Server() method and we are passing the port number 8080. And then we are listening for the connection event at the server side and then we will showing the message inside the terminal that new client is connected.
Now we need to create the index.html inside the same directory to make the client side and copy paste the below code
index.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> </body> <script> const websocket = new WebSocket("ws://localhost:8080") websocket.addEventListener('open',() => { console.log("a new client is connected") }) </script> </html> |
As you can see we are using the WebSocket() method to create a new socket and we are passing the url of the server at the backend. And then we are adding the event listener using the addEventListener() method and here we are providing the open event which we are listening whenever the new client is connected we are printing the message inside the console that new client is connected.
Sending Data Between Client and WebSocket Server
Now we will be sending the data in between the client and server using the message event listener as shown below
index.js
|
1 2 3 4 5 |
wss.on('connection',(ws) => { console.log("A new client is connected") ws.send("this is the message coming from the server") }) |
As you can see in the backend code we are using the send() method to send the message to the client side. And then we need to catch the event inside the client side using the message event
index.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> </body> <script> const websocket = new WebSocket("ws://localhost:8080") websocket.addEventListener('open',() => { console.log("a new client is connected") }) websocket.addEventListener('message',({data}) => { console.log(data) }) </script> </html> |
As you can see we are using the message event and inside it we are getting the data inside the callback function and inside it we are printing the message or data in the console.
Sending Data From Client to Server Side
Now we will be sending the data from the client to server side as shown below
index.html
|
1 2 3 4 5 6 |
const websocket = new WebSocket("ws://localhost:8080") websocket.addEventListener('open',() => { console.log("a new client is connected") websocket.send("message from client side") }) |
As you can see we are using the send() method to send the message from the client side to server side.
index.js
Now at the server side we have the message event we will be showing the message at the command line
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
const websocket = require('ws') const wss = new websocket.Server({ port:8080 }) wss.on('connection',(ws) => { console.log("A new client is connected") ws.on('message',(data) => { console.log(data.toString()) }) }) |
Sending Objects Between Websocket & Client
Now we will be sending the user object between the client and the server as shown below
index.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
const websocket = require('ws') const wss = new websocket.Server({ port:8080 }) wss.on('connection',(ws) => { console.log("A new client is connected") let user = { name:"John Latham", age:45 } ws.send(JSON.stringify(user)) }) |
As you can see we are declaring an user object and then we are using the send() method to send this object to the client side and we are using the JSON.stringify() method to convert the object to json before sending it to the client.
Now at the client side we will be using the JSON.parse() method to parse the json to javascript object as shown below
index.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> </body> <script> const websocket = new WebSocket("ws://localhost:8080") websocket.addEventListener('open',() => { console.log("a new client is connected") }) websocket.addEventListener('message',({data}) => { console.log(JSON.parse(data)) }) </script> </html> |
