今天没有延续上一篇讲的内容，穿插一段小插曲，WebSocket 实时数据通讯同步的问题，今天我们并不是很纯粹地讲 WebSocket 相关知识，我们通过 WebGL 3D 拓扑图来呈现一个有趣的 Demo。接下来我们就看看这个实时数据通讯是一个什么样的套路。

我们先来聊聊这次 Demo 的思路吧，首先我要有一个 3D 的拓扑图组件，在上面创建几个节点，然后通过拉力布局（ForceLayout）将这些节点自动布局，但是有一定，需要在不同的网页窗口下，对应节点的位置是一样的，简单地说就是不同网页窗口所呈现的节点布局是一样，而且拖动不同网页窗口中的任意的节点，都将更新所有页面窗口，让所有窗口的呈现都是一样的。

根据上面的思路，我们该如何去规划呢？既然需要实时数据通讯，那么就需要使用 WebSocket，WebSocket 又是什么呢？WebSocket 是 HTML5 一种新的协议，它没有标准的 API，各个实现都有自己的一套 API，在这里我们就不去详细研究 WebSocket 的具体实现，我也讲不了，至少现在讲不了。

在这里我们用比较易上手的 Node.js 的 Socket.IO 做通讯框架，Socket.IO 让长连接通讯变得无比简单，服务器再也不用等待客户端的请求就可以直接给客户端发送消息，根据这样的特性就可以实现数据通讯同步的问题。

我们来写一个最简单的例子，将任何一个客户端发送到服务器的消息，原封不动的转发到所有连接到服务器的客户端，我们来看看要实现这样的一个功能，服务端要怎么设计。

首先我们得搭建一个简易的 web 服务器。

var app = require('express')();

var http = require('http').Server(app);

app.get('/', function(req, res) {

    res.end('<h1>Hello Message!</h1>');

});

http.listen(4000, function() {

    console.log('listening on *:4000');

});

以上的代码的 Node.js 的代码，将这串代码贴到一个 js 文件中，比如命名为 server.js 然后在 Terminal 中 cd 到 server.js 对应的文件夹下，如果 node server.js 后回车，如果发现报了 Cannot find module ‘xxx’ 的字样，那么说明你在当前目录下没有安装程序用到的相关包。那么我们在当前目录下创建一个叫 package.json 的文件，然后把下面的程序拷贝到该文件中，然后在 Terminal 中输入 npm install，等安装完后，就可以正常启动服务器了。

{

  "name": "socket-example",

  "version": "0.0.1",

  "description": "my first socket.io app",

  "dependencies": {

    "express": "^4.10.2",

    "socket.io": "^1.4.8"

  }

}

启动后，你在浏览器上输入 localhost:4000 就可以看到 Hello Message! 的字样。这是最简单的 HTTP 服务器，那么我们如何在上面加上 WebSocket 的功能呢呢？眼尖的同学可能已经发现上面的 package.json 的内容已经包含了 Socket.IO，那么 Socket.IO 要怎么用呢，怎么样才能达到实时数据通讯的效果呢？

var io = require('socket.io')(http);

io.on('connection', function(socket) {

    console.log('a user connected');

    socket.on('disconnect', function() {

        console.log('user disconnected');

    });

    socket.on('message', function(msg) {

        io.emit('message', msg);

    });

});

在 server.js 中加入上面那串代码，就可以实现客户端之间的实时数据通讯问题。但是在浏览器输入 localhost:4000 你看到的是 Hello Message! 的字样，要怎样才能访问到具体的 html 网页内容呢？这个时候就需要稍微修改下我们的服务器了。

app.get('/', function(req, res) {

    res.sendFile(__dirname + '/index.html');

});

也就是将前面提到的 res.end('<h1>Hello Message!</h1>’); 代码换成 res.sendFile(__dirname + ‘/index.html'); 做个页面跳转，从而达到访问具体 html 网页的目的，在这边是是为了满足 Demo 而做的方案，要搭建一个真正的 http 静态服务器肯定不是这样子的，搭建 http 静态服务器我在这边就不介入研究了，大家刚兴趣的话，可以自己到网上搜索学习。

那么客户端该如何实现来展现服务端的实时通讯呢？

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title>Socket.IO Message</title>

        <style media="screen">

            #send { font-size: 14px; }

            #msgList { list-style-type: none; margin: 10px 0px; padding: 0; }

            #msgList li { padding: 5px 10px; }

            #msgList li:nth-child(odd) { background: #eee; }

        </style>

        <script src="/socket.io/socket.io.js"></script>

        <script>

            var socket = io();

            var init = function() {

                var input = document.getElementById('message'),

                    sendFunc = function() {

                        var msg = input.value;

                        if (!msg) return;

                        socket.emit('message', input.value);

                        input.value = '';

                    };

                input.addEventListener('keyup', function(e) {

                    if (e.keyCode === 13) {

                        sendFunc();

                    }

                });

                var list = document.getElementById('msgList');

                socket.on('message', function(msg) {

                    var li = document.createElement('li');

                    li.innerHTML = msg;

                    list.insertBefore(li, list.childNodes[0]);

                });

                var btn = document.getElementById('send');

                btn.addEventListener('click', sendFunc);

            };

        </script>

    </head>

    <body onload="init();">

        Message: <input id="message" />

        <button type="button" id="send">Send</button><br/>

        <ul id="msgList"></ul>

    </body>

</html>

以上代码就可以做到数据同步了，具体我来解释下。

页面很简单，有一个 input 文本框，和一个 Send 按钮，还有一个 ul 无序列表用来显示用户发送的内容，当用户在 input 文本框中输入内容后，按下 enter 键或者点击 Send 按钮都会想服务器发送文本框中填入的内容，并且服务器会将这条消息原封不动地推送到所有的客户端中，在客户端接收到消息后，就会想 ul 无序列表中填入消息。

这个 Demo 在 http://socket.io/get-started/chat/ 这上面比我讲得清楚，大家可以到上面详细阅读，会理解得更全面一点。

由于篇幅的问题，我今天就介绍到这了，下一篇，我们将重点介绍前面说到的结合 HT for Web 的 3D 拓扑图组件来展现实时数据通讯的效果，让每个客户端都同步操作，效果图如上。

基于 WebSocket 实现 WebGL 3D 拓扑图实时数据通讯同步（一）的更多相关文章

  1. 基于 WebSocket 实现 WebGL 3D 拓扑图实时数据通讯同步（二）

    我们上一篇<基于 WebSocket 实现 WebGL 3D 拓扑图实时数据通讯同步(一)>主要讲解了如何搭建一个实时数据通讯服务器,客户端与服务端是如何通讯的,相信通过上一篇的讲解,再配 ...

  2. 通过 WebSocket 实现 WebGL 3D 拓扑图实时数据通讯同步（二）

    我们上一篇<基于 WebSocket 实现 WebGL 3D 拓扑图实时数据通讯同步(一)>主要讲解了如何搭建一个实时数据通讯服务器,客户端与服务端是如何通讯的,相信通过上一篇的讲解,再配 ...

  3. Socket.IO – 基于 WebSocket 构建跨浏览器的实时应用

     Socket.IO 是一个功能非常强大的框架,能够帮助你构建基于 WebSocket 的跨浏览器的实时应用.支持主流浏览器,多种平台,多种传输模式,还可以集合 Exppress 框架构建各种功能复杂 ...

  4. 基于 WebSocket 构建跨浏览器的实时应用

    Socket.IO – 基于 WebSocket 构建跨浏览器的实时应用 Socket.IO 是一个功能非常强大的框架,能够帮助你构建基于 WebSocket 的跨浏览器的实时应用.支持主流浏览器,多 ...

  5. Sqlserver2000联系Oracle11G数据库进行实时数据的同步

    Sqlserver2000联系Oracle11G数据库进行实时数据的同步 1,前提条件 我有sqlserver2000环境,已经存在oracle11g环境,准备这两个数据库,建立各自的訪问账号,两者之 ...

  6. 基于Kafka Connect框架DataPipeline在实时数据集成上做了哪些提升？

    在不断满足当前企业客户数据集成需求的同时,DataPipeline也基于Kafka Connect 框架做了很多非常重要的提升. 1. 系统架构层面. DataPipeline引入DataPipeli ...

  7. 基于 HTML5 的 WebGL 3D 档案馆可视化管理系统

    前言 档案管理系统是通过建立统一的标准以规范整个文件管理,包括规范各业务系统的文件管理的完整的档案资源信息共享服务平台,主要实现档案流水化采集功能.为企事业单位的档案现代化管理,提供完整的解决方案,档 ...

  8. 基于 HTML5 的 WebGL 3D 智能楼宇监控系统

    前言 智能监控的领域已经涉及到了各大领域,工控.电信.电力.轨道交通.航天航空等等,为了减少人员的消耗,监控系统必不可少.之前我写过一篇 2D 的智能地铁监控系统广受好评,突然觉得,既然 2D 的这么 ...

  9. 根据矩阵变化实现基于 HTML5 的 WebGL 3D 自动布局

    在数学中,矩阵是以行和列排列的数字,符号或表达式的矩形阵列,任何矩阵都可以通过相关字段的标量乘以元素.矩阵的主要应用是表示线性变换,即f(x)= 4 x等线性函数的推广.例如,旋转的载体在三维空间是一 ...

随机推荐

  1. .NET Core的日志[4]:将日志写入EventLog

    面向Windows的编程人员应该不会对Event Log感到陌生,以至于很多人提到日志,首先想到的就是EventLog.EventLog不仅仅记录了Windows系统自身针对各种事件的日志,我们的应用 ...

  2. InstallShield 脚本语言学习笔记

    InstallShield脚本语言是类似C语言,利用InstallShield的向导或模板都可以生成基本的脚本程序框架,可以在此基础上按自己的意愿进行修改和添加.     一.基本语法规则      ...

  3. 读python源码--对象模型

    学python的人都知道,python中一切皆是对象,如class生成的对象是对象,class本身也是对象,int是对象,str是对象,dict是对象....所以,我很好奇,python是怎样实现这些 ...

  4. npm 使用小结

    本文内容基于 npm 4.0.5 概述 npm (node package manager),即 node 包管理器.这里的 node 包就是指各种 javascript 库. npm 是随同 Nod ...

  5. JavaScript中String对象的方法介绍

    1.字符方法 1.1 charAt() 方法,返回字符串中指定位置的字符. var question = "Do you like JavaScript?"; alert(ques ...

  6. A/B Testing的简要知识

    A/B testing主要用来检测网站或者APP的两个版本中哪一个更好,它的中心思想是把流量一分为二,一份用作experiment group,访问新的版本,另一份用作control group,访问 ...

  7. VPN连接常见错误汇总

    提示远程服务器没有响应. 这种情况有两种情况,一种是远程服务器出现故障.另一种是自己的电脑出现问题,具体原因我还没有找到,但是可以肯定的是注册表除了问题,一个终极的解决办法就是把注册表替换了.先将HK ...

  8. MyBatis3.2从入门到精通第一章

    第一章一.引言mybatis是一个持久层框架,是apache下的顶级项目.mybatis托管到goolecode下,再后来托管到github下.(百度百科有解释)二.概述mybatis让程序将主要精力 ...

  9. BZOJ 2756: [SCOI2012]奇怪的游戏 [最大流 二分]

    2756: [SCOI2012]奇怪的游戏 Time Limit: 40 Sec  Memory Limit: 128 MBSubmit: 3352  Solved: 919[Submit][Stat ...

  10. [BOT]自己动手实现android 饼状图，PieGraphView，附源码解析

    本文要介绍的是一个参照手机支付宝app里面记账本功能里的"饼状图"实现的控件.通常app中可能的数据展示控件有柱状图,折线图,饼状图等,如果需要一个包含多种View控件的库,那么 ...