Skip to content

WebNinjaDeveloper.com

Programming Tutorials




Menu
  • Home
  • Youtube Channel
  • Official Blog
  • Nearby Places Finder
  • Direction Route Finder
  • Distance & Time Calculator
Menu

Node.js WebSocket Library Example to Stream & Send Data in Between Client & Server in Javascript

Posted on January 25, 2023

 

 

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

 

 

JavaScript
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

 

 

JavaScript
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

 

 

JavaScript
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

 

 

JavaScript
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

 

 

JavaScript
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>

 

 

Recent Posts

  • Android Java Project to Download Multiple Images From URL With Progressbar & Save it inside Gallery
  • Android Java Project to Capture Image From Camera & Save it inside Gallery
  • Android Java Project to Crop,Scale & Rotate Images Selected From Gallery and Save it inside SD Card
  • Android Kotlin Project to Load Image From URL into ImageView Widget
  • Android Java Project to Make HTTP Call to JSONPlaceholder API and Display Data in RecyclerView Using GSON & Volley Library
  • Angular
  • Bunjs
  • C#
  • Deno
  • django
  • Electronjs
  • java
  • javascript
  • Koajs
  • kotlin
  • Laravel
  • meteorjs
  • Nestjs
  • Nextjs
  • Nodejs
  • PHP
  • Python
  • React
  • ReactNative
  • Svelte
  • Tutorials
  • Vuejs




©2023 WebNinjaDeveloper.com | Design: Newspaperly WordPress Theme