magnify
magnify
Home JavaScript Small WebApp using Express.js, Socket.io and GoogleMaps
category

Small WebApp using Express.js, Socket.io and GoogleMaps

Published on May 10, 2015 by in JavaScript

After being to MarseilleJS with a friend, he helped me to leave Marseille using small street by phone. I thought that it may be cool to let him use a streetview to locate me and drive me using more precisely using the loudspeaker.

The principle is simple: user who needs help share his location with the server and get a “partner id” (like teamviewer and others do), thanks to this id, another user can view his location on a google map with a street view. Heading of the street view follow heading of the user phone.

share latLng through socket.io

Idea is to play with cool stuff, so, welcome to express.js and socket.io.

There is nothing to say about their installation, quite easy, just follow their instructions.

Server code

In this project, I split express code from business one, it helps to keep a clear and concise code.

Express code (index.js):

var express = require('express');
var app = express();
var http = require('http').Server(app);
var io = require('socket.io')(http);

app.use(express.static('public'));

io.on('connection', require('./server/handler'));

http.listen(3000, function () {
    console.log('listening on *:3000');
});

My handler receive the socket (io) and bind “events” on this way:

socket.on("latlng", [args,...], callback);

A cool thing with socket.io, is that arguments sent when emitting events may be functions, and an internal link allows us to run it from the server side.

See the handler’s code

I associated partner ids to socket.io’s rooms (renamed by habit “channel”).

A singleton manages existing channels and creates new ones. Channel object keeps user data in order to provide it to the friend when he connects, else, he should have to wait for new fresh data (because browser does not provide it continuously).

Manager code
channel code

Client code

The client code is quite simple too, no specific difficulty.

Getting the location is done with html5 features:

Getting the heading


if (window.DeviceOrientationEvent) {
    window.addEventListener("deviceorientation", function (event) {
        ...
    });
}

Heading value is not directly usable as such for streetview heading, but to play with a CSS compass, I had to invert it:

$("#compass").css({
    transform: 'rotate(-' + heading + 'deg)',
    webkitTransform: 'rotate(-' + heading + 'deg)'
});

Getting the location

navigator.geolocation.watchPosition(
    ...
)

Socket.io + Nginx configuration

My server serves PHP websites throught Nginx, so I had to add a new site to “hide” node behind Nginx. Just following this article helped me to have my apps working with Nginx.

Here is the site configuration of Nginx:

server {
  listen 80; 
  server_name map.demonte.fr;
  location / { 

    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
    proxy_http_version 1.1;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header Host $host;
    proxy_pass http://127.0.0.1:3000/;
  }
}

Limiting the node server to listen on local only is quite easy, just replace:

http.listen(3000);

By:

http.listen(3000, "127.0.0.1");

To run it, forever will do the job. Just don’t forget to not run it from the root user.

 
 Share on Facebook Share on Twitter Share on Reddit Share on LinkedIn
No Comments  comments 

You must be logged in to post a comment.