关于 WebSocket 和 HTTP 区别的思考以及一个最简单的 WebSocket 的客户端和服务器实现

WebSocket和HTTP的主要区别在于连接方式、通信模式和性能表现。

连接方式：WebSocket在服务器和浏览器间提供全双工通信功能，即服务器可以主动推送数据到浏览器端，而这在HTTP协议中是不可能实现的，HTTP协议只支持浏览器到服务器端的Request - Response方式，即浏览器客户端如果想查询服务器端是否有最新的事件发生，则只能采取低效的轮询方式进行。
通信模式：WebSocket基于TCP连接，在服务器和浏览器间提供了全双工通信功能，即服务器可以主动推送数据到浏览器端，而这在HTTP协议中是不可能实现的，HTTP协议只支持浏览器到服务器端的Request - Response方式，即浏览器客户端如果想查询服务器端是否有最新的事件发生，则只能采取低效的轮询方式进行。
性能表现：当启用Keep-Alive时，客户端和服务器同意为后续请求或响应保持连接打开。默认情况下，HTTP连接在数据事务结束时关闭。这意味着客户端创建一个新连接来请求页面的每个文件，服务器在发送数据后关闭这些TCP连接。但是，如果服务器需要同时响应多个HTTP请求并为每个新的TCP连接提供一个文件，则站点页面的加载时间将会增加。这可能会导致糟糕的用户体验。为了克服这个问题，网站所有者需要启用Keep-Alive标头来限制新连接的数量。通过打开Keep-Alive连接标头，客户端可以通过单个TCP连接下载所有内容，例如JavaScript、CSS、图像和视频，而不是为每个文件发送不同的请求。

WebSocket并不是将HTTP的设计完全推翻重建，而是在HTTP的基础上增添了一些逻辑来，管理客户端和服务器端的流。这些流的内容也是HTTP请求和响应，保留了旧语义，只是编码和打包方式不同。

WebSocket服务器端实现：

代码实现包含了4个关键点：

服务器监听在默认的3001端口上。
一旦WebSocket客户端有发送到3001端口上的连接请求时，代码第12行的on监听函数触发，监听的事件名称为connection，然后在监听函数的实现体里，打印出客户端连接的id值。
服务器端接收了客户端的链接后，向客户端通过第15行的emit方法，发送一个messages_jerry的事件，以及一个JSON对象作为事件负载。
第17行服务器端监听在messages事件上的监听函数触发时，说明接收到了从客户端发送过来的事件，在监听函数里打印出客户端传递过来的数据。

WebSocket客户端实现：

// #!/usr/bin/env nodeconst io = require('socket.io-client');var socket = io.connect('

http://localhost:3001'

);socket.on('messages_jerry', function (data) { console.log("data sent from Server:" + JSON.stringify(data,2,2)); socket.emit('messages', { my: 'data sent from Client' }); });socket.on('connect', function (socket2) { console.log('Connection with Server established!'); socket.emit('messages', 'Client has established connection with Server');});

代码的关键点：

客户端通过connect方法向WebSocket服务器发起连接请求
连接成功建立后，客户端第10行的on监听函数触发，该函数监听在connect事件上，会在Web Socket连接成功建立后自动触发。
客户端在第12行调用emit向服务器发送一个messages事件。
客户端监听在messages_jerry的监听函数触发，说明服务器端有数据到达。使用第6行的console.log语句打印出这个数据。
在第7行代码，客户端调用emit，向服务器端发送一个请求，通知服务器自己已经收到了服务器发送过来的数据。

使用命令行node wsServer.js启动服务器端，看到如下输出：

新开一个命令行窗口，使用node wsClient.js启动客户端，能看到客户端打印出的成功建立连接，以及从服务器端发送过来的数据：

切换回服务器端，红色高亮的内容，就是客户端与服务器端建立连接之后，服务器端新打印出的数据：

您可能感兴趣问答

Collapsible

热门标签

热点问答