redpepperintern_Jeff redpepperintern_Jeff - 7 months ago 27
Javascript Question

websockets javascript mapbox

Relativity new to code and find that I learn most from muscling through a problems but need some pointers.

My project has two parts. A responsive map that deep dives into communities (this is being built by the team) and a second map that displays the map in fullscreen with markers that appear and disappear to display activity as users click into each community. I have the second map on my own server. The production map will need to pass a Lat,Long object [I've figured out how to collect these coordinates].

1) I believe I'll need a websocket to connect the two. Could anyone pass along specific examples with how to connect the two that passes an object?

2) After I have the Lat,Long object on the server, how do I pass it from my websocket app into my javascript file? OR do I make my javascript file LISTEN for a new instance of a message?

Thank you!

Answer

Websockets are inherently two directional once activated ... That is traffic can be initiated from either side

Here is the entire nodejs code to define a WebSocket server side

var websocker_server = function() {

    "use strict";

    var port = 8888;

    console.log('listening on    localhost:' + port + '\n');

    var WebSocketServer = require('ws').Server;

    var wss = new WebSocketServer({ port: port });

    wss.on('connection', function connection(ws) {

        ws.send('this message was sent from server side to client');


        ws.on('message', function incoming(message) {
        console.log('received: %s', message);
        });

        // ---

        ws.on("error", function(event) {

            var error_msg = "ERROR on on on error : " + event;
            console.error(error_msg);
        });

        // ---

        ws.on("close", function() {

            console.log("websocket connection close");
        });

    });

}(); //  websocker_server = function()

So now I show the entire html with inline javascript which defines a bare bones browser side WebSocket client

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>bare bones websocket with nodejs serverside</title>

<script type="text/javascript">

    var websocket_connection = (function() {

        var port_serverside = 8888; // connect to server side which is listening to this port

        var web_socket = new WebSocket('ws://' + location.hostname + ':' + port_serverside);

        web_socket.onopen = function (event) {

          web_socket.send("Here's some text client has sent to server upon socket open event!"); 
        };

        web_socket.onmessage = function (event) {
          console.log(event.data);
        }

    }());   //   websocket_connection

</script>

</head>
<body>
</body>
</html>

The big picture is first launch the nodejs server side which listens on port 8888 ... then run the html from a httpd server so you can point your browser at its code ... the browser client initiates the WebSocket connection which once opened up then permits messages to be sent in either direction ... I suggest you first get this working using text format messages as outlined here and if desired possibly use JSON format if your messages start getting complex

I posted all this code and supporting instructions as a repo HERE

Comments