DZone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
Please enter at least three characters to search
Refcards Trend Reports
Events Video Library
Refcards
Trend Reports

Events

View Events Video Library

Zones

Culture and Methodologies Agile Career Development Methodologies Team Management
Data Engineering AI/ML Big Data Data Databases IoT
Software Design and Architecture Cloud Architecture Containers Integration Microservices Performance Security
Coding Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Culture and Methodologies
Agile Career Development Methodologies Team Management
Data Engineering
AI/ML Big Data Data Databases IoT
Software Design and Architecture
Cloud Architecture Containers Integration Microservices Performance Security
Coding
Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance
Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks

The software you build is only as secure as the code that powers it. Learn how malicious code creeps into your software supply chain.

Apache Cassandra combines the benefits of major NoSQL databases to support data management needs not covered by traditional RDBMS vendors.

Generative AI has transformed nearly every industry. How can you leverage GenAI to improve your productivity and efficiency?

Modernize your data layer. Learn how to design cloud-native database architectures to meet the evolving demands of AI and GenAI workloads.

Related

  • Exploring Intercooler.js: Simplify AJAX With HTML Attributes
  • The Cypress Edge: Next-Level Testing Strategies for React Developers
  • An Introduction to Object Mutation in JavaScript
  • How JavaScript DataTable Libraries Address Challenging Requirements in Web Data Management

Trending

  • A Deep Dive Into Firmware Over the Air for IoT Devices
  • The Full-Stack Developer's Blind Spot: Why Data Cleansing Shouldn't Be an Afterthought
  • The Human Side of Logs: What Unstructured Data Is Trying to Tell You
  • Concourse CI/CD Pipeline: Webhook Triggers
  1. DZone
  2. Data Engineering
  3. Data
  4. Real-Time Interaction Between Maps With Socket.io and JavaScript

Real-Time Interaction Between Maps With Socket.io and JavaScript

In this post, you'll learn how send the same data to multiple clients from your server-side in real-time using JavaScript.

By 
Nic Raboy user avatar
Nic Raboy
·
Apr. 12, 19 · Tutorial
Likes (1)
Comment
Save
Tweet
Share
17.5K Views

Join the DZone community and get the full member experience.

Join For Free

I was doing some thinking recently. I was thinking about how I could make maps more useful than just displaying visual content on the screen when requested. While displaying map information on a screen is useful in many circumstances, it doesn't make for the most exciting of examples. This lead me to thinking about things from a more interactive level.

Take the example of first responders, such as law enforcement, fire, and medical. It might not make the most sense for them to be looking and refreshing a map to find incidents. Instead, what if the map automatically refreshed and was synchronized between the first responders? What I mean by this is, what if incidents automatically appeared on everyone's map at the same time without interaction?

In this tutorial, we're going to explore sockets to broadcast map related information in real-time using Socket.io and simple JavaScript.

To get a sense of what we're going to accomplish, take a look at the following animated image.

While not exactly a first responders type scenario, you can see that as the map is clicked in one instance, markers start to show up on all of the maps that are connected to the server via sockets. This is done without having to constantly refresh each of the windows.

Creating the Socket.io Server for Keeping Track of Marker Data

To make use of this example, we will need to create a server-side application for managing all of the client sockets and incoming data. As data is sent from one of the clients to the server, the server tracks it and sends it to all of the other connected clients. The clients never communicate directly with other clients.

Create a new project on your computer and initialize a new Node.js project by executing the following commands:

npm init -y
npm install express socket.io --save
touch app.js

The above commands will create a package.json file, install our dependencies, and create a new app.js file for all of our server-side logic. If you don't have the touch command, go ahead and create the app.js file however makes the most sense.

Open the app.js file and include the following boilerplate code:

const Express = require("express")();
const Http = require("http").Server(Express);
const Socketio = require("socket.io")(Http);

Http.listen(3000, () => {
    console.log("Listening at :3000...");
});

The above code will create our server which will listen for incoming socket connections on port 3000. However, the server will currently do nothing with those connections.

Instead, add the following to the app.js file:

const markers = [];

Socketio.on("connection", socket => {
    for(let i = 0; i < markers.length; i++) {
        socket.emit("marker", markers[i]);
    }
    socket.on("marker", data => {
        markers.push(data);
        Socketio.emit("marker", data);
    });
});

The markers variable will be used instead of a database in this example. Essentially, when marker information is sent to the server, it is stored in the markers array. Every time a user connects to the server, each item in the markers array is broadcasted to the client that had just connected to get them up to speed with everything that should exist on the map. If you really wanted to be efficient, you might just send the entire array rather than looping through it.

When any of the connected clients sends a message labeled as marker, that message data is added to the markers array and broadcasted to all connected clients, not just the one that sent it. In this scenario the marker label is just a name and holds no real relevance to the markers array.

At this point in time the server-side code is complete. We're not doing anything too aggressive for this example, just storing marker data and sending it to users.

Developing the Client Front-End for Displaying the Map and Markers

Now we need to develop the client facing application code. The role of this code will be to display a map with markers, and send marker data to the server every time the map has been clicked.

Create an index.html file on your computer and include the following boilerplate code:

<!DOCTYPE html>
    <body style="margin: 0">
        <div id="map" style="width: 100vw; height: 100vh;"></div>
        <script src="http://js.api.here.com/v3/3.0/mapsjs-core.js" type="text/javascript" charset="utf-8"></script>
        <script src="http://js.api.here.com/v3/3.0/mapsjs-service.js" type="text/javascript" charset="utf-8"></script>
        <script src="http://js.api.here.com/v3/3.0/mapsjs-mapevents.js" type="text/javascript" charset="utf-8"></script>
        <script src="http://cdnjs.cloudflare.com/ajax/libs/socket.io/2.2.0/socket.io.js"></script>
        <script>
            const platform = new H.service.Platform({
                "app_id": "APP_ID_HERE",
                "app_code": "APP_CODE_HERE"
            });
            const map = new H.Map(
                document.getElementById("map"),
                platform.createDefaultLayers().normal.map,
                {
                    zoom: 10,
                    center: { lat: 37.7397, lng: -121.4252 }
                }
            );
            const mapEvent = new H.mapevents.MapEvents(map);
            const behavior = new H.mapevents.Behavior(mapEvent);
        </script>
    </body>
</html>

I've written quite a few examples around the code above. All we're doing is initializing the HERE platform and displaying a map. Do note that we are including the Socket.io client library. You must also swap out the app id and app code tokens to match your actual tokens that are obtained through the HERE Developer Portal.

The next step is to establish a connection to the socket server:

const socket = io("http://localhost:3000");

With the connection established, we probably want to update the map with whatever data is currently stored on the server. We can do this by creating a listener for events by a particular label:

socket.on("marker", data => {
    const marker = new H.map.Marker(data);
    map.addObject(marker);
});

Take note of the marker label. It doesn't have to match the label that we have on the server, but do note that the server is trying to emit messages to that particular label. Just make sure you keep all your labels and emit labels in sync. In the listener, as new data comes in, a marker is created and added to the map. This applies to the data the server is currently storing and any future data.

To create new markers and send them to the other clients, we can configure an event listener on the map for gesture type events:

map.addEventListener("tap", event => {
    const position = map.screenToGeo(
        event.currentPointer.viewportX, 
        event.currentPointer.viewportY
    );
    const marker = new H.map.Marker(position);
    map.addObject(marker);
    socket.emit("marker", position);
});

In the above code, after a tap event occurs, the pixel coordinates are converted to geo coordinates and the position of those coordinates are sent to the server to be broadcasted to all the other clients.

If you run the server and launch a few instances of the client facing web application, you'll get an idea of what's happening.

Conclusion

You just saw how to use Socket.io with JavaScript to send map data in real-time to multiple clients. Like I mentioned earlier, I could imagine this would be useful in a lot of scenarios where it is critical that information is provided in real-time and in a synchronized fashion to all clients.

Socket.IO JavaScript Data (computing) Interaction

Published at DZone with permission of Nic Raboy, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

Related

  • Exploring Intercooler.js: Simplify AJAX With HTML Attributes
  • The Cypress Edge: Next-Level Testing Strategies for React Developers
  • An Introduction to Object Mutation in JavaScript
  • How JavaScript DataTable Libraries Address Challenging Requirements in Web Data Management

Partner Resources

×

Comments
Oops! Something Went Wrong

The likes didn't load as expected. Please refresh the page and try again.

ABOUT US

  • About DZone
  • Support and feedback
  • Community research
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • Become a Contributor
  • Core Program
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 3343 Perimeter Hill Drive
  • Suite 100
  • Nashville, TN 37211
  • support@dzone.com

Let's be friends:

Likes
There are no likes...yet! 👀
Be the first to like this post!
It looks like you're not logged in.
Sign in to see who liked this post!