WebSocket/Http了解

最新推荐文章于 2022-12-13 09:49:47 发布

原创最新推荐文章于 2022-12-13 09:49:47 发布 · 414 阅读

0 ·

CC 4.0 BY-SA版权

本文深入探讨了WebSocket与HTTP协议的主要区别，强调WebSocket的双向通信优势，详细讲解了WebSocket的工作流程，包括创建连接、事件绑定及数据收发过程，同时对比了HTTP的请求响应模式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

WebSocket 是一种网络通信协议，与HTTP的区别：

1.HTTP 协议只能是客户端向服务器发出请求，服务器返回查询结果。HTTP 协议做不到服务器主动向客户端推送信息，只能单向请求。只能使用轮询：每隔一段时候，就发出一个询问，了解服务器有没有新的信息，缺点：效率低，浪费资源。

2.WebSocket特点：服务器可以主动向客户端推送信息，客户端也可以主动向服务器发送信息，可以双向平等对话。

图示区别：

WebSocket工作流程：

JavaScript 向服务器发出建立 WebSocket 连接的请求，连接建立以后，客户端和服务器端就可以通过 TCP 连接直接交换数据。

当获取 Web Socket 连接后，你可以通过 send() 方法来向服务器发送数据，并通过 onmessage 事件来接收服务器返回的数据。

①、如何创建一个WebSocket 对象：

var Socket = new WebSocket(url); //url由ws或wss标识+IP+端口组成

代码示例：

createWebSocket: function() {
    self.WS_URL = "wss://xxxxx.xxxx.com:9080"
    self.ws = new WebSocket(self.WS_URL);      //创建一个websocket
},

②绑定websocket事件：

创建websocket对象后，要绑定websocket事件，websocket有以下事件：

open	Socket.onopen	连接建立时触发
message	Socket.onmessage	客户端接收服务端数据时触发
error	Socket.onerror	通信发生错误时触发
close	Socket.onclose	连接关闭时触发

代码示例：

initEventHandle: function () {
    var self = this;
    self.ws.onopen = function () {
        self.onOpen();
    };
    self.ws.onmessage = function (event) {
        self.onMessage(event);
    };
    self.ws.onclose = function () {
        self.onClose();
    };
    self.ws.onerror = function () {
        self.onError();
    };
},

③发送和接收数据：

发送数据方法：Socket.send()

接收数据：通过 onmessage 事件来接收服务器返回的数据

关闭连接：Socket.close()

Http工作流程：

1.产生一个请求request

2.设置请求地址：setUrl

设置请求类型：setRequestType

设置请求标签：setTag

设置请求参数：setRequestData

设置请求的回调函数：setResponseScriptCallback

然后用CCHttpClient把请求发出去