前端系统和后端服务器怎么通信,前端学习：前后端数据通信之HTTP与WebSocket？...

做可视化，如大屏，往往需要数据实时更新，那么怎么实现呢？

下边是简单的思路：

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：一次连接，终身受益；主被动兼顾！

实现

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

// ...

});

参考

时间和篇幅有限，不能完全解释清楚，感兴趣的可以讨论或者参看参考列出的内容

如果您感觉有所帮助，或者有问题需要交流，欢迎留言评论，非常感谢！

前端菜鸟，还请多多关照！