Welcome folks today in this blog post we will be using the websocket
library 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> |