We respect your privacy

We used cookies to ensure that we give you the best experience on our website. If you continue to use this site we will assume that you are happy with it. What For?

Accept Reject
« Back to Blogs

Websocket Integration with Node

2/25/21 12:03 PM

Websocket Integration with Node

EveryOne building realTime apps with Socket.IO these days. Think a moment about it: There are a million other things that are built based on real-time applications. Do you want to build your own app with real-time updates? Let’s have a look at the basic configuration to build socket communication apps using Node and React Js.

List of things that we will learn from this blog

  • What is Socket programming
  • How to configure socket with Node and react js

Presumption: Before we proceed further, I assume that you have basic knowledge of NodeJs and reactJs

What is Socket programming
  • Socket is an internet communication protocol that provides bi-direction communication on top of TCP protocol
  • Using WebSocket, Client and Server can communicate with each other in a real-time manner.
  • Once the client is connected to the server, the client can receive data from the server without the need to continuously refresh the web page
  • Server can also receive data from client within the same connection
Configuration of socket with Node and React Js
  • Let’s create one directory with name Socket_connection_app

    mkdir socket_connection_app && cd  Socket_connection_app
  • Initialize node project using below command, Which will create package.json file for you
    • npm init
  • We need to install express and socket.io package from node package manager
    • npm i express
    • npm i socket.io
  • Create app.js file on your project directory with will hold the actual server

const express = require("express");

const http = require("http");

const socketIo = require("socket.io");


const port = 8080;

const route = require("./routes/index");


const app = express();

app.use(route);


const server = http.createServer(app);

const io = socketIo(server);
  • I hope you are aware with Node js and this code is not looking magic words to you
    • We can initialize Socket server by passing server object on defined variable socketIo
    • We also define an index route on our app. Even though we are not serving any HTML content to the client. It is necessary for a very simple route to listen for any incoming connection.
  • Now, create index.js file inside a routes directory :

const express = require("express");

const router = express.Router();

router.get("/", (req, res) => {

  res.send({ response: "I am alive" }).status(200);

});


module.exports = router;
  • I hope you are aware with Node js and this code is not looking a magic Designing socket
  • While configuring the socket server, the most important method we can see is on. It takes two-argument, first one is a type of event and the second one is event callback for every connection event
  • Connection event returns a socket object which will be passed to the callback function and by using this socket object server can send data back to the client.

let interval;


io.on("connection", (socket) => {

  console.log("New client connected");

  if (interval) {

    clearInterval(interval);

  }

  interval = setInterval(() => getApiAndEmit(socket), 1000);

  socket.on("disconnect", () => {

    console.log("Client disconnected");

    clearInterval(interval);

  });

});
  • Let’s improve getApiAndEmit method which will generate the message that can be send to the client

let interval;


io.on("connection", (socket) => {

  console.log("New client connected");

  if (interval) {

    clearInterval(interval);

  }

  interval = setInterval(() => getApiAndEmit(socket), 1000);

  socket.on("disconnect", () => {

    console.log("Client disconnected");

    clearInterval(interval);

  });

});
App.js File Example

const express = require("express");

const http = require("http");

const socketIo = require("socket.io");


const port = process.env.PORT || 4001;

const index = require("./routes/index");


const app = express();

app.use(index);


const server = http.createServer(app);


const io = socketIo(server);


let interval;


io.on("connection", (socket) => {

  console.log("New client connected");

  if (interval) {

    clearInterval(interval);

  }

  interval = setInterval(() => getApiAndEmit(socket), 1000);

  socket.on("disconnect", () => {

    console.log("Client disconnected");

    clearInterval(interval);

  });

});


const getApiAndEmit = socket => {

  const response = new Date();

  // Emitting a new message. Will be consumed by the client

  socket.emit("FromAPI", response);

};

server.listen(port, () => console.log(`Listening on port ${port}`));
  • To start the node server use below command for the same
    • To start the node server use below command for the same
Let’s implement the front end for second-hand communication(using react Js)
  • Create react js app
    • npx create-react-app socket_connection_app
  • Install socket client on your front end app
    • npm i socket.io-client
  • To make a simple structure, Let’s create an app.js file in the src directory

import socketIOClient from "socket.io-client";

const ENDPOINT = "http://127.0.0.1:8080";


function App() {

  const [response, setResponse] = useState("");


  useEffect(() => {

    const socket = socketIOClient(ENDPOINT);

    socket.on("FromAPI", data => {

      setResponse(data);

    });

  }, []);


  return (

    <p>

      It's <time dateTime={response}>{response}</time>

    </p>

  );

}


export default App;
  • Start the react server and you can see the timestamp getting update every second by the magic of the socket
    • cd socket_connection_app
    • npm start

For professional paid support, you may contact us at [email protected] .

3789 Views
node react reactjs wensocket realtime storybook react developer learn storybook
Average (0 Votes)
The average rating is 0.0 stars out of 5.
contact-us Request a callback WhatsApp