websockets javascript 地图框答案

【问题标题】：websockets javascript mapboxwebsockets javascript 地图框
【发布时间】：2016-04-18 18:51:22
【问题描述】：

相对论是代码新手，我发现我从解决问题中学到的最多，但需要一些指导。

我的项目有两个部分。一个深入研究社区的响应式地图（这是由团队构建的）和第二个地图，该地图以全屏显示地图，并在用户单击每个社区时显示和消失以显示活动的标记。我在自己的服务器上有第二张地图。生产地图需要传递一个 Lat,Long 对象[我已经弄清楚如何收集这些坐标]。

1) 我相信我需要一个 websocket 来连接两者。任何人都可以传递具体的例子来说明如何连接传递一个对象的两者吗？

2) 在服务器上拥有 Lat,Long 对象后，如何将它从我的 websocket 应用程序传递到我的 javascript 文件中？还是让我的 javascript 文件 LISTEN 以获取消息的新实例？

谢谢！

【问题讨论】：

简单明快的问题人人都喜欢...请改写陈述本质
使用 AJAX 怎么样？
你的服务器端是nodejs吗？
是 - 服务器上的 nodejs。我找到了这个link - Websocket Basics。它解释了我可以使用回调函数来接收输入。这是否意味着需要在我的主 app.js 文件中打开 websocket，然后我只需将其分配给要传递给我已经创建的函数的变量？
@ScottStensland = 感谢您的建议。以后我会尽量简洁。

标签： javascript node.js websocket mapbox

【解决方案1】：

一旦激活，Websocket 本质上是双向的……也就是说，流量可以从任一侧发起 ...一旦打开一个 websocket 连接是持久的，所以即使不处理流量也会保持打开状态

这是定义WebSocket服务器端的整个nodejs代码

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()

所以现在我用内联 javascript 显示整个 html，它定义了一个简单的浏览器端 WebSocket 客户端

<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 web_socket = new WebSocket('ws://127.0.0.1:8888');

        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>

首先启动侦听端口 8888 的 nodejs 服务器端...然后从 httpd 服务器运行 html，以便您可以将浏览器指向其代码...浏览器客户端启动 WebSocket 连接，该连接曾经打开然后允许向任一方向发送消息...我建议您首先使用此处概述的文本格式消息来完成此工作，如果需要，如果您的消息开始变得复杂，可能使用 JSON 格式

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

【讨论】：