websocket文档_我们来看看Swoole是如何实现WebSocket服务器及客户端的

系统管理员 2023-01-12 10:26 171阅读 0赞

**文章来自：laravel学院**

# **WebSocket 概述** #

在此之前，有必要对 WebSocket 的原理做简单的说明，WebSocket 复用了 HTTP 协议来实现握手，然后通过请求报文中的 Upgrade 字段将 HTTP 协议升级到 WebSocket 协议来建立 WebSocket 通信连接，一旦 WebSocket 连接建立之后，就可以在这个长连接上通过 WebSocket 数据帧进行双向通信，客户端和服务端可以在任何时候向对方发送报文，而不是 HTTP 协议那种服务端只有在客户端发起请求后才能响应，从而解决了在 Web 页面实时显示最新资源的问题。

与 HTTP 类似，WebSocket 协议对应的 scheme 是 ws，如果是加密的 WebSocket 对应的 scheme 是 wss。

在这篇教程中，我们将在服务端基于 Swoole 实现简单的 WebSocket 服务器，然后在客户端基于 JavaScript 实现 WebSocket 客户端。

# **WebSocket 服务器** #

PHP 异步网络通信引擎 Swoole 内置了对 WebSocket 的支持，通过几行 PHP 代码就可以写出一个异步非阻塞多进程的 WebSocket 服务器：

on('open', function (SwooleWebSocketServer $server, $request) { echo "server: handshake success with fd{$request->fd}";});// 收到消息时触发推送$server->on('message', function (SwooleWebSocketServer $server, $frame) { echo "receive from {$frame->fd}:{$frame->data},opcode:{$frame->opcode},fin:{$frame->finish}"; $server->push($frame->fd, "this is server");});// 关闭 WebSocket 连接时触发$server->on('close', function ($ser, $fd) { echo "client {$fd} closed";});// 启动 WebSocket 服务器$server->start();

编写完成后，将这段 PHP 代码保存到本地 websocket\_server.php 文件。

# **WebSocket 客户端** #

在客户端，可以通过 JavaScript 调用浏览器内置的 WebSocket API 实现 WebSocket 客户端，实现代码和服务端差不多，无论服务端还是客户端 WebSocket 都是通过事件驱动的，我们在一个 HTML 文档中引入相应的 JavaScript 代码：

Chat Client

将这个 HTML 文档命名为 **websocket\_client.html**。

# WebSocket 通信演示 #

接下来，我们在命令行启动 WebSocket 服务器：

php websocket.php

然后在浏览器中访问 **websocket\_client.html**，首先会提示我们输入昵称：

![32c162c263d5ab799f234c6716a2aa9b.png][]

输入之后点击确定，JavaScript 代码会继续往下执行，让输入框获取焦点，然后初始化 WebSocket 客户端并连接到服务器，这个时候通过开发者工具可以看到 Console 标签页已经输出了连接已建立日志：

![a5d6dea36bb7d142020d340537e7c7a1.png][]

在 Network 里面也可以看到 WebSocket 握手请求和响应：

![e79b1d54785f2130280b3d624432dd82.png][]

这个时候我们在输入框中输入「你好，WebSocket！」并回车，即可触发客户端发送该数据到服务器，服务器接收到消息后会将其显示出来：

![8e96892acbac2301e1243b2c607d67d3.png][]

同时将「This is server」消息推送给客户端，客户端通过 onmessage 回调函数将获取到的数据显示出来。在开发者工具的 Network->WS 标签页可以查看 WebSocket 通信细节：

![686abe500b442ef054c9207a00fe2dc4.png][]

看起来，这个过程还是客户端触发服务器执行推送操作，但实际上，在建立连接并获取到这个客户端的唯一标识后，后续服务端资源有更新的情况下，仍然可以通过这个标识主动将更新推送给客户端，而不需要客户端发起拉取请求。WebSocket 服务器和客户端在实际项目中的实现可能会更加复杂，但是基本原理是一致的。

![904f5a0d076beb84c690b7066c1acc97.png][]

[32c162c263d5ab799f234c6716a2aa9b.png]: /images/20221119/5ef7a795ab7f4bc2b0f9cc1b9316b686.png
[a5d6dea36bb7d142020d340537e7c7a1.png]: /images/20221119/641f86b33a644c7fb66f942f129d7781.png
[e79b1d54785f2130280b3d624432dd82.png]: /images/20221119/4814c2b914064605bf3565f514b09b8f.png
[8e96892acbac2301e1243b2c607d67d3.png]: /images/20221119/0093a1794d964668872b60ca18a4f15d.png
[686abe500b442ef054c9207a00fe2dc4.png]: /images/20221119/a901f602d7ee4b44a8bf802c1e26ae37.png
[904f5a0d076beb84c690b7066c1acc97.png]: /images/20221119/6adfeccb5ad74de0aab5027428da7501.png