websocket实现即时通讯怎么操作？

Posted 2023-04-19

参考技术A 要使用WebSocket实现即时通讯，可以按照以下步骤进行操作：

1，打开浏览器并创建WebSocket对象：在需要与服务器进行通信的页面中添加javascript代码，创建WebSocket对象。

例如：
var ws = new WebSocket("ws://server_ip:port");

其中 "ws://server_ip:port" 是WebSocket服务器的地址和端口号。

2，监听WebSocket事件：为WebSocket对象添加事件监听器来处理与服务器的连接、消息接收等事件。例如：
ws.onopen = function()
console.log("WebSocket连接已打开。");
;

ws.onmessage = function(event)
console.log("收到消息：" + event.data);
;

ws.onclose = function()
console.log("WebSocket连接已关闭。");
;

3，发送消息：使用WebSocket对象的send()方法向服务器发送消息。例如：
ws.send("Hello, Server!");

4，服务器端实现：在服务器端编写WebSocket服务端程序来处理来自客户端的连接请求、接收和发送消息等操作。

WebSocket是一种基于TCP协议的全双工通信协议，在实现即时通讯功能时具有优秀的性能和体验表现。以上只是简单介绍了WebSocket的基本操作流程，具体实现方式还需要根据具体需求和情况来调整和完善。 参考技术B

WebSocket是一种在Web浏览器和服务器之间建立持久连接的协议，用于实现实时通讯，其操作流程如下：

建立WebSocket连接：客户端通过浏览器向服务器发起WebSocket连接请求，服务器收到请求后生成唯一的标识符，表示该WebSocket连接，然后将标识符返回给客户端，建立连接。

发送消息：连接建立后，客户端和服务器可以相互发送消息，可以通过WebSocket API在客户端上发送消息，也可以在服务器端编写代码发送消息到客户端。

接收消息：客户端和服务器都可以在接收到消息后进行相应的处理，客户端可以通过WebSocket API监听来自服务器的消息，服务器也可以监听来自客户端的消息，然后根据不同的业务逻辑进行处理。

断开连接：当客户端或服务器不再需要WebSocket连接时，可以主动关闭连接，也可以等待连接超时自动关闭。在连接关闭之前，客户端和服务器可以相互发送消息。

总之，通过WebSocket可以在Web浏览器和服务器之间建立一种双向通信的机制，用于实现实时通讯。要实现WebSocket即时通讯，需要在客户端和服务器上分别编写代码，实现连接的建立、消息的发送和接收、连接的关闭等功能。

深入即时通讯开发协议WebSocket协议细节

WebSocket 是HTML5一种新的web通信技术，它真正实现了浏览器与服务器的全双工实时通信(full-duplex)。本文将详解介绍WebSocket的通信协议细节。

 

传统“长轮询”实现Web端即时通讯的问题

WebSocket出现之前，Web端为了实现即时通讯，所用的技术都是Ajax轮询(polling)。轮询是在特定的的时间间隔（如每1秒），由浏览器对服务器发出HTTP request，然后由服务器返回最新的数据给客服端的浏览器。这种传统的HTTP request 的模式带来很明显的缺点 – 浏览器需要不断的向服务器发出请求，然而HTTP request 的header是非常长的，里面包含的数据可能只是一个很小的值，这样会占用很多的带宽。

在 WebSocket API，浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送，改变了原有的B/S模式。

浏览器端的websocket 发起的请求一般是：

01 02 03 04 05 06 07 08 09 10 11

// javacsript   var ws = new WebSocket("ws://127.0.0.1:4000");   ws.onopen = function()     console.log("succeed");   ;   ws.onerror = function()     console.log(“error”);   ;   ws.onmessage = function(e)   console.log(e);

这个请求是对摸个服务器的端口发送的，一般的话，会预先在服务器将一个socket 绑定到一个端口上，客户端和服务器端在这个预定的端口上通信（我这里绑定的就是 4000 端口，默认情况下，websocke 使用 80 端口）。即时通讯聊天软件app开发可以加蔚可云的v：weikeyun24咨询

 

然后，在服务器端的socket监听到这个packet 之后就生成一个新的 socket，将发送过来的数据中的 Sec-WebSocket-Key 解析出来，然后按照把“Sec-WebSocket-Key”加上一个魔幻字符串“258EAFA5-E914-47DA-95CA-C5AB0DC85B11”。使用SHA-1加密，之后进行BASE-64编码，将结果作为“Sec-WebSocket-Accept”头的值，返回给客户端。

然后就会在这个持久的通道下进行通信，包括浏览器的询问，服务器的push，双方是在一个全双工的状态下相互通信。

WebSocket 通信协议

如上述的例子：切换后的websocket 协议中的 数据传输帧的格式(此时不再使用http协议) 官方文档给出的说明：

直接看这个，谁都会有点头大: 我画了一幅图来简单的解释这个 frame 的结构：

各字段的解释：

1 2 3 4 5 6 7

FIN              1bit 表示信息的最后一帧，flag，也就是标记符 RSV 1-3        1bit each 以后备用的 默认都为 0 Opcode         4bit 帧类型， Mask              1bit 掩码，是否加密数据，默认必须置为1 Payload len   7bit 数据的长度，当这个7 bit的数据 == 126 时，后面的2 个字节也是表示数     据长度，当它 == 127 时，后面的 8 个字节表示数据长度 Masking-key      1 or 4 bit 掩码 Payload data  playload len  bytes 数据

所以我们这里的代码，通过判断 Playload len的值，来用 substr 截取 Masking-key 和 PlayloadData。

根据掩码解析数据的方法是：

1 2 3

for ( i = 0 ; i < data.length ; i++)     orginalData += data[i]  ^  maskingKey[i mod 4 ];

在PHP中，当我们收到数据之后，按照这里的格式截取数据，并将其按照这里的方法解析后就得到了浏览器发送过来的数据。 当我们想把数据发送给浏览器时，也要按照这个格式组装frame。 这里是我的方法：

01 02 03 04 05 06 07 08 09 10 11

function frame( $s )                    $a = str_split ( $s , 125);                    if ( count ( $a ) == 1)                            return "\\x81" . chr ( strlen ( $a [0])) . $a [0];                                       $ns = "" ;                    foreach ( $a as $o )                            $ns .= "\\x81" . chr ( strlen ( $o )) . $o ;                                       return $ns ;

强行将要发送的数据分割成 125 Byte / frame，这样 playload len 只需要 7 bits。也就是直接将数据的长度的ASCII 码拼接上去，然后后面跟上要发送的数据。 每一个 frame 前面加的 ‘\\x81’ 用二进制就是： 1000 0001 1000 ：

1 2	1 是 FIN 000 是三个备用的bit

可以设置 opcode的值，来告诉浏览器这个frame的数据属性。