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

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

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

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

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

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

  1. var app = require('express')();
  2. var http = require('http').Server(app);
  3.  
  4. app.get('/', function(req, res) {
  5.     res.end('<h1>Hello Message!</h1>');
  6. });
  7.  
  8. http.listen(4000, function() {
  9.     console.log('listening on *:4000');
  10. });

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

  1. {
  2.   "name": "socket-example",
  3.   "version": "0.0.1",
  4.   "description": "my first socket.io app",
  5.   "dependencies": {
  6.     "express": "^4.10.2",
  7.     "socket.io": "^1.4.8"
  8.   }
  9. }

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

  1. var io = require('socket.io')(http);
  2. io.on('connection', function(socket) {
  3.     console.log('a user connected');
  4.     socket.on('disconnect', function() {
  5.         console.log('user disconnected');
  6.     });
  7.  
  8.     socket.on('message', function(msg) {
  9.         io.emit('message', msg);
  10.     });
  11. });

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

  1. app.get('/', function(req, res) {
  2.     res.sendFile(__dirname + '/index.html');
  3. });

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

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

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title>Socket.IO Message</title>
  6.         <style media="screen">
  7.             #send { font-size: 14px; }
  8.             #msgList { list-style-type: none; margin: 10px 0px; padding: 0; }
  9.             #msgList li { padding: 5px 10px; }
  10.             #msgList li:nth-child(odd) { background: #eee; }
  11.         </style>
  12.         <script src="/socket.io/socket.io.js"></script>
  13.         <script>
  14.             var socket = io();
  15.             var init = function() {
  16.                 var input = document.getElementById('message'),
  17.                     sendFunc = function() {
  18.                         var msg = input.value;
  19.                         if (!msg) return;
  20.                         socket.emit('message', input.value);
  21.                         input.value = '';
  22.                     };
  23.  
  24.                 input.addEventListener('keyup', function(e) {
  25.                     if (e.keyCode === 13) {
  26.                         sendFunc();
  27.                     }
  28.                 });
  29.  
  30.                 var list = document.getElementById('msgList');
  31.                 socket.on('message', function(msg) {
  32.                     var li = document.createElement('li');
  33.                     li.innerHTML = msg;
  34.                     list.insertBefore(li, list.childNodes[0]);
  35.                 });
  36.  
  37.                 var btn = document.getElementById('send');
  38.                 btn.addEventListener('click', sendFunc);
  39.             };
  40.         </script>
  41.     </head>
  42.     <body onload="init();">
  43.         Message: <input id="message" />
  44.         <button type="button" id="send">Send</button><br/>
  45.         <ul id="msgList"></ul>
  46.     </body>
  47. </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. 红黑树——算法导论(15)

    1. 什么是红黑树 (1) 简介     上一篇我们介绍了基本动态集合操作时间复杂度均为O(h)的二叉搜索树.但遗憾的是,只有当二叉搜索树高度较低时,这些集合操作才会较快:即当树的高度较高(甚至一种极 ...

  2. console的高级使用

    1.console.table()用来表格化展示数据. var people = { zqz: { name: 'zhaoqize', age: 'guess?' }, wdx: { name: 'w ...

  3. PHP之Memcache缓存详解

         Mem:memory缩写(内存):内存缓存 1.  断电或者重启服务器内存数据即消失,即临时数据: Memcache默认端口:11211 存入方式:key=>>value    ...

  4. 显示本地openssl支持的加密算法

    参考页面: http://www.yuanjiaocheng.net/webapi/parameter-binding.html http://www.yuanjiaocheng.net/webapi ...

  5. 记录一次bug解决过程：数据迁移

    一 总结 不擅长语言表达,勤于沟通,多锻炼 调试MyBatis中SQL语法:foreach 问题:缺少关键字VALUES.很遗憾:它的错误报的让人找不着北. 二 BUG描述:MyBatis中批量插入数 ...

  6. 海鑫智圣：物联网漫谈之MQTT协议

    什么是MQTT协议 MQTT(消息队列遥测传输协议)是IBM在1999年专门针对物联网等应用场景来制订的轻量级双向消息传输协议,它主要是为了解决物联网上使用到的设备的互相通信的问题,以及这些设备与后端 ...

  7. 使用Nginx反向代理 让IIS和Tomcat等多个站点一起飞

    使用Nginx 让IIS和Tomcat等多个站点一起飞 前言: 养成一个好习惯,解决一个什么问题之后就记下来,毕竟“好记性不如烂笔头”. 这样也能帮助更多的人 不是吗? 最近闲着没事儿瞎搞,自己在写一 ...

  8. SQL Server中SELECT会真的阻塞SELECT吗？

    在SQL Server中,我们知道一个SELECT语句执行过程中只会申请一些意向共享锁(IS) 与共享锁(S), 例如我使用SQL Profile跟踪会话86执行SELECT * FROM dbo.T ...

  9. zookeeper(单机/集群)安装与配置

    一.安装与单机配置 1.下载: wget http://archive.apache.org/dist/zookeeper/stable/zookeeper-3.4.6.tar.gz 如果网站下载不了 ...

  10. ASP.NET 5 改名 ASP.NET Core 1.0

    今天,Scott Hanselman在其博客上宣布<ASP.NET 5 is dead - Introducing ASP.NET Core 1.0 and .NET Core 1.0>, ...