php安装swoole扩展请移步swoole官方网站:
我这里使用的yum源安装的php环境,在安装的时候已经集成swoole扩展,具体环境安装步骤请移步《CentOS7.8使用yum安装PHP 7.4》
1:安装laravel-swoole扩展:
bash
复制代码
composer require swooletw/laravel-swoole
2:生成配置文件,运行以下命令在/config命令看生成配置文件swoole_http.php并swoole_websocket.php
ini
复制代码
php artisan vendor:publish --tag=laravel-swoole
3:在Laravel应用中使用Swoole之前,先通过Composer安装LaravelS扩展包:
LaravelS官方文档:github.com/hhxsv5/lara…
bash
复制代码
composer require hhxsv5/laravel-s
该命令会发布配置文件 laravels.php 到 config 目录下,以及脚本文件到 bin 目录下
复制代码
php artisan laravels publish
4:如果想用websocket,在config/laravels.php下
dart
复制代码
'websocket' => [ 'enable' => true, 'handler' => \App\Services\WebSocketService::class, ],
5:WebSocketService.php
php
复制代码
namespace App\Services; use Hhxsv5\LaravelS\Swoole\WebSocketHandlerInterface; use Illuminate\Support\Facades\Log; use Swoole\Http\Request; use Swoole\WebSocket\Frame; use Swoole\WebSocket\Server; class WebSocketService implements WebSocketHandlerInterface { public function __construct() { } // 连接建立时触发 public function onOpen(Server $server, Request $request) { // 在触发 WebSocket 连接建立事件之前,Laravel 应用初始化的生命周期已经结束,你可以在这里获取 Laravel 请求和会话数据 // 调用 push 方法向客户端推送数据,fd 是客户端连接标识字段 Log::info('WebSocket 连接建立'); $server->push($request->fd, 'Welcome to WebSocket Server built on LaravelS'); } // 收到消息时触发 public function onMessage(Server $server, Frame $frame) { $server->push($frame->fd, 'This is a message sent from WebSocket Server at ' . date('Y-m-d H:i:s')); } // 关闭连接时触发 public function onClose(Server $server, $fd, $reactorId) { Log::info('WebSocket 连接关闭'); } }
6:启动laravels
arduino
复制代码
cd bin php laravels start //使用该命令启动laravels php laravels stop //使用该命令停止laravels php laravels reload //使用该命令重载laravels php laravels restart //使用该命令重启laravels php laravels info //使用该命令显示laravels信息 php laravels help //使用该命令显示laravels帮助
注意启动成功之后的端口号,这个配置nginx的时候会用到,我这里的端口号是5200。
7:配置.env文件
将一下代码添加至.env文件中。
ini
复制代码
#这里的 IP 需要和 nginx upstream 中配置的监听 IP 保持一致 LARAVELS_LISTEN_IP=0.0.0.0 LARAVELS_DAEMONIZE=true
8:测试swoole是否可用。
在根目录下创建ws_server.php文件
php
复制代码
<?php //创建WebSocket Server对象,监听0.0.0.0:9502端口 $ws = new Swoole\WebSocket\Server('0.0.0.0', 9502); //监听WebSocket连接打开事件 $ws->on('open', function ($ws, $request) { $ws->push($request->fd, "hello, welcome\n"); }); //监听WebSocket消息事件 $ws->on('message', function ($ws, $frame) { echo "Message: {$frame->data}\n"; $ws->push($frame->fd, "server: {$frame->data}"); }); //监听WebSocket连接关闭事件 $ws->on('close', function ($ws, $fd) { echo "client-{$fd} is closed\n"; }); $ws->start();
然后在服务器使用命令行执行
复制代码
php ws_server.php
前端代码:我这里使用的vue3.0语法
typescript
复制代码
import { useRouter } from "vue-router"; import { PropType, ref, watch, reactive, toRefs, inject, provide, onMounted } from "vue"; // 引入公共js文件 import utils from "/@/assets/js/public/function"; // 定义返回的类型 interface dataRef { close: () => void; } export default { name: "Drawer", // VUE3语法 setup函数 // setup官方文档:https://www.vue3js.cn/docs/zh/guide/composition-api-setup.html#参数 setup(props: any, content:any): dataRef { /** * @name: 声明data * @author: camellia * @email: guanchao_gc@qq.com * @date: 2021-01-10 */ const data = reactive({ drawerShow: common.drawerShow, }); /** * @name: 关闭组件 * @author: camellia * @email: guanchao_gc@qq.com * @date: 2021-01-10 */ const close = () => { data.drawerShow = false; common.drawerShow = data.drawerShow; } // 初始化客户端套接字并建立连接 var sock = new WebSocket("ws://111.231.162.140:9502"); // 连接建立时触发 sock.onopen = (event) => { console.log("Connection open ..."); change(); } // 接收到服务端推送时执行 sock.onmessage = (event) => { var msg = event.data; console.log(event); console.log("webscoket 接收到返回消息!"); }; // 连接关闭时触发 sock.onclose = (event) => { console.log("Connection closed ..."); } // 发送消息给webscoket const change = () => { var msg = "你好啊~"; // 将输入框变更信息通过 send 方法发送到服务器 if (sock.readyState === 1) { sock.send(msg); console.log('消息发送---success!'); } else { console.log('消息发送---faild!'); } }; /** * @name: 将data绑定值dataRef * @author: camellia * @email: guanchao_gc@qq.com * @date: 2021-01-10 */ const dataRef = toRefs(data); return { close, ...dataRef } }, }
这里大概做一下解释,setup中的代码在页面加载完成的时候会执行,和webscoket相关的代码这里基本上都有注释。