Constructing a real-time location app with Node.js and Socket.IO

Socket.IO gives communication between net purchasers and Node.js servers in actual time. For a lot of use circumstances right now, builders must continually replace data for his or her purposes in actual time, which necessitates using a bi-directional communication device that may maintain knowledge up to date immediately.

On this article, we’ll take a look at how you need to use Socket.IO with Node.js for real-time communication of knowledge in your utility to be used circumstances like this.

Leap forward:

REST API vs WebSockets

Conventional REST APIs are at their most helpful once we wish to retrieve a useful resource and don’t want fixed ongoing updates.

In the event you take a look at a crypto commerce, for instance, once we place a bid to purchase a coin, the bid is unlikely to alter fairly often, so we will mannequin this habits precisely utilizing a conventional REST API.

Nevertheless, the precise worth of a coin itself could be very unstable, because it responds to market tendencies, like several asset. For us to get the latest worth, we would wish to provoke a request and it’s extremely possible that it’ll have modified once more simply as our response arrives!

In such a state of affairs, we have to be notified as the worth of the asset modifications, which is the place WebSockets shine.

The assets used to construct conventional REST APIs are extremely cacheable as a result of they’re hardly ever up to date. WebSockets, in the meantime, don’t profit as a lot from caching, as this may occasionally have adverse results on efficiency.

There are in depth guides that spotlight the completely different use circumstances for each conventional REST APIs and WebSockets.

On this information, we be constructing a real-time, location-sharing utility utilizing Node.js and Socket.IO as our use case.

Listed here are the applied sciences we’ll use :

• Node.js/Specific: For our utility server
• Socket.IO: Implements WebSockets beneath the hood
• Postgres: The database of option to retailer person location knowledge
• Postgis: This extension makes it attainable to work with places within the database and gives extra features, like calculating the space round a location

Organising an Specific.js server

We’ll begin by establishing an Specific utility.

For this, I’ve modified a boilerplate that we’ll use. Let’s comply with these directions to get began:

1. Clone this GitHub repository
2. cd socket-location/
3. npm set up
4. Lastly, create an .env file within the root and duplicate the contents of the env. pattern file. To get the values, we might really must arrange an area database or use an internet Postgres database platform like Elephant or Heroku. Go to the platform and create a database totally free, get the URL, fill within the credentials, and begin the appliance

Organising WebSockets with Socket.IO

To arrange Sockets.IO with our present starter recordsdata, it’s vital for us to make use of JavaScript Hoisting, which permits us to make the socket occasion obtainable throughout completely different recordsdata.

We’ll begin by putting in Socket.IO

npm set up socket.io

The following factor we have to do is combine it with our categorical utility. Open the app.js file within the root of the mission listing and edit it within the following manner:

const categorical = require("categorical");
const { createServer } = require("http");
const { Server } = require("socket.io");
const { initializeRoutes } = require("./routes");

let app = categorical();
const port = 3000;
app.use(categorical.json());
app.use(categorical.urlencoded({ prolonged: true }));

app = initializeRoutes(app);
app.get("https://weblog.logrocket.com/", (req, res) => {
  res.standing(200).ship({
    success: true,
    message: "welcome to the start of greatness",
  });
});

const httpServer = createServer(app);
const io = new Server(httpServer, {
  cors: {
    origin: "*",
    strategies: ["GET", "POST"],
  },
});

io.on("connection", (socket) => {
  console.log("We're reside and related");
  console.log(socket.id);
});

httpServer.hear(port, () => {
  console.log(`Instance app listening on port ${port}`);
});

Now we have efficiently wired our server to work with sockets; now we have to wire our consumer to reply to this connection in order that there will be communication backwards and forwards.

Our consumer is usually a net utility, a cell utility, or any system that may be configured to work with WebSockets.

We might be mimicking the consumer habits on this utility with POSTMAN for the sake of brevity and ease.

To do that, do the next:

1. Open up Postman and click on on the “New” button within the top-left nook
2. Then click on the “Websocket Request” button on the pop-up
3. There must be textual content that claims “uncooked” — use the drop down and alter it to “Socket.IO”
4. Paste your connection string on the tab — on this case, localhost:3000 — and click on the join button

You need to see a singular ID printed out to the console and the Postman tab ought to say “Linked”.

Here’s a video that reveals the place we’re and a recap of what we now have accomplished up to now.

Library | Loom – 10 October 2022

No Description

Authentication and authorization

Now that we now have efficiently related to our Socket.IO occasion, we have to present some type of authentication and authorization to maintain undesirable customers out. That is particularly the case when you think about that we’re permitting connections from any consumer, as specified by the * in our CORS choice when connecting.

To do that, we might be utilizing this middleware:

io.use((socket, subsequent) => {
  if (socket.handshake.headers.auth) {
    const { auth } = socket.handshake.headers;
    const token = auth.cut up(" ")[1];
    jwt.confirm(token, course of.env.JWT_SECRET_KEY, async (err, decodedToken) => {
      if (err) {
        throw new Error("Authentication error, Invalid Token equipped");
      }
      const theUser = await db.Consumer.findByPk(decodedToken.id);
      if (!theUser)
        throw new Error(
          "Invalid E-mail or Password, Kindly contact the admin if that is an anomaly"
        );
      socket.theUser = theUser;
      return subsequent();
    });
  } else {
    throw new Error("Authentication error, Please present a token");
  }
});

First, we’re checking if a token is supplied within the request header. We’re additionally checking if it’s a legitimate token and that the person is current in our database earlier than permitting them to attach — this ensures solely authenticated customers have entry.

Sharing location between customers

To share places between customers, we might be utilizing socket connections. We may also want to arrange our database to just accept geometry objects, and to do that we’ll set up the PostGIS extension on our database. On the consumer, we might be utilizing the JavaScript Geolocation API.

First, we’ll set up the PostGIS extension on our database.

Run this command on the root of the mission:

 npx sequelize-cli migration:generate --name install-postgis

Then, open the migration file generated and paste the next:

"use strict";
/** @sort {import('sequelize-cli').Migration} */
module.exports = {
  up: (queryInterface, Sequelize) => {
    return queryInterface.sequelize.question("CREATE EXTENSION postgis;");
  },
  down: (queryInterface, Sequelize) => {
    return queryInterface.sequelize.question("DROP EXTENSION postgis CASCADE;");
  },
};

The above code snippet will set up the postgis extension on our database occasion once we run migration.

npm run migrate

(Word: As of writing, I couldn’t efficiently run migration to put in PostGIS extension on the Postgres occasion supplied by ElephantSQL as I had permission points, however I used to be in a position to efficiently run the identical on a Heroku occasion)

Subsequent, we have to put together our database to retailer person location data, and to do that, we’ll create one other migration file:

npx sequelize-cli mannequin:generate --name Geolocation --attributes socketID:string,location:string

Delete the contents and paste the next:

"use strict";

/** @sort {import('sequelize-cli').Migration} */

module.exports = {
  async up(queryInterface, Sequelize) {
    await queryInterface.createTable("Geolocations", {
      id: {
        allowNull: false,
        autoIncrement: true,
        primaryKey: true,
        sort: Sequelize.INTEGER,
        references: {
          mannequin: "Customers",
          key: "id",
          as: "id",
        },
      },
      socketID: {
        sort: Sequelize.STRING,
        distinctive: true,
      },
      location: {
        sort: Sequelize.GEOMETRY,
      },
      on-line: {
        sort: Sequelize.BOOLEAN,
      },
      trackerID: {
        sort: Sequelize.INTEGER,
        references: {
          mannequin: "Customers",
          key: "id",
          as: "id",
        },
      },
      createdAt: {
        allowNull: false,
        sort: Sequelize.DATE,
      },
      updatedAt: {
        allowNull: false,
        sort: Sequelize.DATE,
      },
    });
  },
  async down(queryInterface, Sequelize) {
    await queryInterface.dropTable("Geolocations");
  },
};

…after which we run migrations once more:

npm run migrate

We additionally wish to create a relationship between the 2 fashions, so in fashions/person.js, add the next code. Right here we’re making a one-to-one relationship between the person mannequin and the Geolocation mannequin.

...
static affiliate(fashions) {
      // outline affiliation right here
      this.hasOne(fashions.Geolocation, { foreignKey: "id" });
    }
...

Then, in fashions/geolocation.js, add:

.... 
static affiliate(fashions) {
      // outline affiliation right here
      this.belongsTo(fashions.Consumer, { foreignKey: "id" });
    }
....

Subsequent, we have to construct the precise route that facilitates the connection. To do that, go into routes and create /monitor/monitor.js. Then, add the next:

const { Router } = require("categorical");
const db = require("../../fashions");
const { handleJwt } = require("../../utils/handleJwt");
const trackerRouter = Router();
trackerRouter.put up(
  "/book-ride",
  handleJwt.verifyToken,
  async (req, res, subsequent) => {
    // seek for person that's offline
    // assign the booker id to the
    const {
      person,
      physique: { location },
    } = req;
    //returns the primary person that meets the factors
    const user2 = await db.Consumer.findOne({
      the place: { function: "driver" },
    });
    db.Geolocation.replace(
      {
        trackerID: user2.id,
        on-line: true,
      },
      { the place: { id: person.id }, returning: true }
    );
    db.Geolocation.replace(
      {
        trackerID: person.id,
        location: {
          sort: "Level",
          coordinates: [location.longitude, location.latitude],
        },
        on-line: true,
      },
      { the place: { id: user2.id }, returning: true }
    );
    if (!user2)
      return res.standing(404).ship({
        success: false,
        message,
      });
    return res.standing(200).ship({
      success: true,
      message: "You've gotten efficiently been assigned a driver",
    });
  }
);
module.exports = { route: trackerRouter, title: "monitor" };

As well as, we additionally wish to guarantee that we each time we enroll a person, we additionally create a geolocation object for them.

Add this simply earlier than you ship a response when making a person within the routes/person/person.js file:

....
await db.Geolocation.create({ id: person.id });
const token = handleJwt.signToken(person.dataValues);
.....

in the event you now open POSTMAN up and ship the request, it’s best to get the response that you’ve got efficiently been assigned a driver.

Emitting and receiving occasions

We might be sending and receiving objects that signify the geographical place of a person, which we’ll do on the net by way of the Geolocation API.

It’s fairly easy to work with and it is rather correct for the overwhelming majority of recent shopper units like smartphones and laptops, as they’ve GPS in-built.

Once we sign off the item that captures this data, we now have:

place: {
          coords: {
                       accuracy: 7299.612787273156
                       altitude: null
                       altitudeAccuracy: null
                       heading: null
                       latitude: 6.5568768
                       longitude: 3.3488896
                       pace: null
           },
        timestamp: 1665474267691
}

In the event you go to w3schools together with your cell phone and stroll round whereas trying on the longitude and latitude data, you’ll uncover that your location is consistently altering to mirror the place you might be in actual time.

It’s because your new location particulars are being fired as you might be shifting! There may be different data captured within the place object, which incorporates pace in addition to altitude.

Now, let’s create socket handlers that can really emit and hear to those occasions between the person and drivers.

in our app.js, edit the next line to seem like this:

const { onConnection } = require("./socket");

....
io.on("connection", onConnection(io));
....

Then, we’ll create a socket listing within the root of our utility and add the next recordsdata:

driversocket.js

const { updateDbWithNewLocation } = require("./helpers");
const db = require("../fashions");
const hoistedIODriver = (io, socket) => {
  return async perform driverLocation(payload) {
    console.log(`driver-move occasion has been obtained with ${payload} 🐥🥶`);
    const isOnline = await db.Geolocation.findByPk(payload.id);
    if (isOnline.dataValues.on-line) {
      const recipient = await updateDbWithNewLocation(payload, isOnline);
      if (recipient.trackerID) {
        const deliverTo = await db.Geolocation.findOne({
          the place: { trackerID: recipient.trackerID },
        });
        const { socketID } = deliverTo.dataValues;
        io.to(socketID).emit("driver:transfer", {
          location: recipient.location,
        });
      }
    }
  };
};
module.exports = { hoistedIODriver };

The above code handles updating the database with the driving force location and broadcasting it to the listening person.

usersocket.js

const { updateDbWithNewLocation } = require("./helpers");
const db = require("../fashions");
const hoistedIOUser = (io, socket) => {
  return async perform driverLocation(payload) {
    console.log(
      `user-move occasion has been obtained with ${JSON.stringify(payload)} 🍅🍋`
    );
    const isOnline = await db.Geolocation.findByPk(payload.id);
    if (isOnline.dataValues.on-line) {
      const recipient = await updateDbWithNewLocation(payload, isOnline);
      if (recipient.trackerID) {
        const deliverTo = await db.Geolocation.findOne({
          the place: { trackerID: recipient.trackerID },
        });
        const { socketID } = deliverTo.dataValues;
        io.to(socketID).emit("person:transfer", {
          location: recipient.location,
        });
      }
    }
  };
};
module.exports = { hoistedIOUser };

The above code handles updating the database with the person location and broadcasting it to the listening driver.

index.js

const { hoistedIODriver } = require("./driversocket");
const { hoistedIOUser } = require("./usersocket");
const configureSockets = (io, socket) => {
  return {
    driverLocation: hoistedIODriver(io),
    userLocation: hoistedIOUser(io),
  };
};
const onConnection = (io) => (socket) => {
  const { userLocation, driverLocation } = configureSockets(io, socket);
  socket.on("user-move", userLocation);
  socket.on("driver-move", driverLocation);
};
module.exports = { onConnection };

… and eventually:

helpers.js

const db = require("../fashions");
const updateDbWithNewLocation = async (payload, oldGeoLocationInfo) => {
  const { id, socketID } = payload;
  const [, [newLocation]] = await db.Geolocation.replace(
    {
      on-line: oldGeoLocationInfo.on-line,
      socketID,
      trackerID: oldGeoLocationInfo.trackerID,
      location: {
        sort: "Level",
        coordinates: [payload.coords.longitude, payload.coords.latitude],
      },
    },
    { the place: { id }, returning: true }
  );
  return newLocation;
};
module.exports = { updateDbWithNewLocation };

To get the working code pattern, kindly go to the GitHub repository and clone and navigate between the branches.

Alright, let’s take this for a spin and see this in motion!

Library | Loom – 11 October 2022

No Description

Conclusion

Thanks for following together with this tutorial on utilizing Node.js and Socket.IO to construct a real-time location app.

We had been in a position to reveal how with fundamental however frequent instruments we will start to implement the features of a location monitoring app with WebSockets.