做可视化，如大屏，往往需要数据实时更新，那么怎么实现呢？
- 下边是简单的思路：
- ajax短轮询：每隔一段时间向服务端发送HTTP请求，服务器接收到请求后返回最新的数据!
- ajax长轮询：与短轮询类似，每隔一段时间向服务端发送HTTP请求，服务器接收到请求后，如果没有更新的数据，则阻塞程序，等到有数据更新时返回最新的数据!
- websocket：全双工（双向同时收发消息）通信，服务端有数据更新时可以主动推送到客户端。
上边说的只是简单的实现方案，至于孰优孰劣要从其各自背后的工作原理说起。说简单点，就是弄明白HTTP、WebSocket与服务器数据进行通信过程的差异！
HTTP
之前的HTTP篇 讲过，HTTP是无状态的，为什么呢？因为HTTP向服务器请求数据时，先要通过TCP与服务器建立连接（三次握手），发送请求，服务器解析请求并返回相应数据，连接关闭（清除身份验证信息），完成一次请求过程。下次请求重新建立连接，重新验证身份。这样一来，ajax轮询的方式，需要不停的发送请求，每次都要重新握手，效率比较低下。
另外，HTTP请求是被动的，即客户端发送request，服务端才会返回response。
WebSocket
2008年诞生的websocket，如今已被各大浏览器支持，与HTTP大致属于求同存异的关系吧！WebSocket在向服务端请求数据是也是需要与服务端建立连接的（而且是借助HTTP建立连接的方式实现的，只不过在建立连接后通过‘Upgrade: websocket’的请求头设置，将协议由HTTP转换为websocket，之后的数据通信便于HTTP再无关系），只不过成功建立连接后，在数据相应之后没有立即关闭（长连接），而是以阻塞的形式继续等待请求(因为协议变成了websocket)，之后所有数据通信均由该连接完成。而且该连接是全双工的，支持客户端和服务端同时收发消息！
比较
通过上面的简单介绍，相信你对HTTP与WebSocket在数据通信方面已经有了一些认识，以及对数据实时更新问题解决的优劣也有了判断。
- ajax轮询：需要重复建立连接，资源消耗大，效率低下；被动更新数据。
- websocket：一次连接，终身受益；主被动兼顾！
实现
参考MDN-Git（JavaScript实现样例），贴出主要代码：
- client.js
function connect() {
// 以ws(s)开头的URL
var serverUrl = "ws://" + window.location.hostname + ":6502";
// 创建连接
connection = new WebSocket(serverUrl);
connection.onopen = function(evt) {
// 成功建立连接
};
connection.onmessage = function(evt) {
// 从服务端接受到的消息
var msg = JSON.parse(evt.data);
//通过判断消息type，执行相关操作
switch(msg.type) {
case "id":
// ...
break;
case "username":
// ...
break;
case "message":
// ...
break;
}
}
- server.js
var http = require("http");
var url = require("url");
var fs = require("fs");
var WebSocketServer = require("websocket").server;
var connectionArray = [];
var nextID = Date.now();
var appendToMakeUnique = 1;
const dirname = "./websocket-chat";
var server = http.createServer(function(request, response) {
console.log(new Date() + " Received request for " + request.url);
if (request.url === "/") {
//设置编码
response.setHeader("Content-Type", "text/html;charset=utf-8");
fs.createReadStream(dirname + "/index.html").pipe(response);
} else {
if (fs.existsSync(`.${request.url}`)) {
fs.createReadStream(`.${request.url}`).pipe(response);
} else {
response.statusCode = 404;
response.end();
}
}
});
// 发布服务，监听端口6502
server.listen(6502, function() {
console.log(new Date() + " Server is listening on port 6502");
});
// Create the WebSocket server
var wsServer = new WebSocketServer({
httpServer: server,
autoAcceptConnections: true // You should use false here!
});
wsServer.on("connect", function(connection) {
// ...
// Handle the "message" event received over WebSocket. This
// is a message sent by a client, and may be text to share with
// other users or a command to the server.
connection.on("message", function(message) {
if (message.type === "utf8") {
// Process messages
var sendToClients = true;
msg = JSON.parse(message.utf8Data);
var connect = getConnectionForID(msg.id);
switch (msg.type) {
case "message":
// ...
break;
case "username":
// ...
break;
}
});
// Handle the WebSocket "close" event; this means a user has logged off
// or has been disconnected.
connection.on("close", function(connection) {
// ...
});
参考
时间和篇幅有限，不能完全解释清楚，感兴趣的可以讨论或者参看参考列出的内容
- TCP/IP协议，HTTP协议与webSocket协议区别
- 刨根问底HTTP和WebSocket协议(二）
- TCP、UDP、HTTP、SOCKET、WebSocket之间的区别
- MDN-WebSocket API
如果您感觉有所帮助，或者有问题需要交流，欢迎留言评论，非常感谢！
前端菜鸟，还请多多关照！
