内容简介:教程使用以下是一些有可能有帮助的资料:童鞋们也可以像我一样在
教程使用 Swoole 4.3.0
版本开发,但并没有使用协程等功能,只是使用了 WebSocket Server
,理论上安装旧版也是没问题的。环境需要大家自行安装,这个也是学习的一个过程。
以下是一些有可能有帮助的资料:
-
CentOS
中一键安装PHP
开发环境: lnmp.org/install.htm… -
Swoole
安装教程: wiki.swoole.com/wiki/page/6… -
Redis
安装教程:redis.io/download -
php-redis
扩展包: pecl.php.net/package/red…
童鞋们也可以像我一样在 Windows
使用 PHPStorm
进行开发,再通过一些方法如 共享文件夹
、 WinSCP
等 工具 将项目在 CentOS
中运行起来。
安装swoole-ide-helper扩展
使用 PHPStorm
来开发 Swoole
项目的童鞋,如果不想面向运气编程的话,最好安装一个 swoole-ide-Helper
扩展来协作开发。
在项目根目录运行以下命令:
composer require --dev "eaglewu/swoole-ide-helper:dev-master" 复制代码
安装完毕我们就可以愉快地编写 Swoole
代码了。
服务端基本架构
赵童鞋设想的基本架构需要三个层,他们分别是:
Swoole WebSocket
管理这三个层分别需要三个类: Server
、 Logic
、 DataCenter
。
其中最重要的就是 Server
类,它的作用就是作为服务端和客户端的消息交换中心,我们先来写一个初始化的 Server
类,在项目 app
目录新建 Server.php
。
- 使用面向对象的方式实现一个
WebSocket Server
类。 - 分别绑定
start
、workerStart
、open
、message
、close
回调方法 - 在类中引入
composer
自动加载机制。 - 为
WebSocket
对象设置4个worker
进程。
-
Swoole Websocket
: wiki.swoole.com/wiki/page/3…
Server
类:
<?php require_once __DIR__ . '/../vendor/autoload.php'; class Server { const HOST = '0.0.0.0'; const PORT = 8811; const CONFIG = [ 'worker_num' => 4, ]; private $ws; public function __construct() { $this->ws = new \Swoole\WebSocket\Server(self::HOST, self::PORT); $this->ws->set(self::CONFIG); $this->ws->on('start', [$this, 'onStart']); $this->ws->on('workerStart', [$this, 'onWorkerStart']); $this->ws->on('open', [$this, 'onOpen']); $this->ws->on('message', [$this, 'onMessage']); $this->ws->on('close', [$this, 'onClose']); $this->ws->start(); } public function onStart($server) { swoole_set_process_name('hide-and-seek'); echo sprintf("master start (listening on %s:%d)\n", self::HOST, self::PORT); } public function onWorkerStart($server, $workerId) { echo "server: onWorkStart,worker_id:{$server->worker_id}\n"; } public function onOpen($server, $request) { } public function onClose($server, $fd) { } public function onMessage($server, $request) { } } new Server(); 复制代码
我们来运行一下 Server.php
文件,顺便检验一下 Swoole
扩展是否运行正常,在项目 app
目录下,运行 php Server
。
- 后面所有启动
Server
操作都是基于CentOS
环境
[root@localhost app]# php Server.php master start (listening on 0.0.0.0:8811) server: onWorkStart,worker_id:0 server: onWorkStart,worker_id:1 server: onWorkStart,worker_id:2 server: onWorkStart,worker_id:3 复制代码
如果输出以上信息,就代表 Server
运行成功。
Logic
类和 DataCenter
类属于游戏管理类,在 Manager
文件夹下新建 Logic.php
和 DataCenter.php
文件,并在 Datacenter
类中增加一个格式化输出日志的 log()
方法。
Logic
类:
<?php namespace App\Manager; class Logic { } 复制代码
DataCenter
类:
<?php namespace App\Manager; class DataCenter { public static function log($info, $context = [], $level = 'INFO') { if ($context) { echo sprintf("[%s][%s]: %s %s\n", date('Y-m-d H:i:s'), $level, $info, json_encode($context, JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE)); } else { echo sprintf("[%s][%s]: %s\n", date('Y-m-d H:i:s'), $level, $info); } } } 复制代码
前端初始化
前端我们将会使用 Vue
框架来开发,项目只使用到了 v-if
、 v-for
、 <template>
、 WebSocket
技术。如果没有接触过前端框架的童鞋,可以尝试阅读官方文档。
-
Vue
官方文档: cn.vuejs.org/v2/guide/ -
v-if
: cn.vuejs.org/v2/guide/co… -
v-for
: cn.vuejs.org/v2/guide/li… -
<templater>
: cn.vuejs.org/v2/guide/li…
在项目根目录创建 frontend
文件夹,并在其中创建 index.html
文件,进行前端初始化。
- 使用
CDN
的形式引入Vue
框架。 - 根据
Vue
官方文档,编写一个HelloWorld
页面。
index.html
:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>HideAndSeek</title> <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script> <link rel="icon" href="data:;base64,="> </head> <body> <div id="app"> {{ message }} </div> <script> var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' } }) </script> </body> </html> 复制代码
前端的 HelloWorld
页面我们也有了,但是我们要怎么通过 HTTP
请求获取到这个页面呢?这时候就需要使用 Swoole
的 Static Handler
功能。
-
Swoole Static Handler
文档: wiki.swoole.com/wiki/page/7…
- 根据官方文档添加
Swoole Static Handler
配置。 - 为
Server
新增一个监听端口8812
,用于处理HTTP请求。
Server
类:
const FRONT_PORT = 8812; const CONFIG = [ ... 'enable_static_handler' => true, 'document_root' => '/mnt/htdocs/HideAndSeek_teach/frontend', ]; public function __construct() { ... $this->ws->listen(self::HOST, self::FRONT_PORT, SWOOLE_SOCK_TCP); ... } 复制代码
记得将代码中的 document_root
改为自己项目的前端目录哦。
添加完以上代码后,在虚拟机中运行 Server
,并尝试通过浏览器访问 http://虚拟机ip:8812/index.html
浏览前端页面。
看到以上画面就代表访问成功。
WebSocket初始化
现在项目的服务端有了,前端页面有了,就差一个桥梁把他们连接起来,这个桥梁就是 WebSocket
通信机制,项目使用到了简单的 websock.onmessage
、 websock.onopen
、 websock.onerror
、 websock.onclose
。
以下是一些有可能有帮助的资料。
- 阮一峰
WebSocket
教程: www.ruanyifeng.com/blog/2017/0… -
Vue
生命周期: cn.vuejs.org/v2/guide/in… -
Swoole WebSocket onMessage
wiki.swoole.com/wiki/page/4…
- 为
Vue
实例新增data
属性websock
,在Vue
实例创建完毕后,初始化WebSocket
连接服务端并绑定上述四个方法。 - 在
WebSocket
对象建立连接后,立刻发送消息到服务端。 - 服务端接收到客户端发送的消息后,通过客户端的
fd
返回一条消息。 - 服务端增加客户端连接日志输出。
- 在页面关闭时,断开
WebSocket
连接。
- 不清楚
fd
是什么的童鞋可以参考Swoole
官方文档: wiki.swoole.com/wiki/page/5…
本章项目初始化就到这里啦,请童鞋们尽量完成自己的Homework后,再进入下一章的学习。
当前项目结构:
HideAndSeek ├── app │ ├── Manager │ │ ├── DataCenter.php │ │ ├── Game.php │ │ └── Logic.php │ ├── Model │ │ ├── Map.php │ │ └── Player.php │ └── Server.php ├── composer.json ├── composer.lock ├── frontend │ └── index.html ├── test.php └── vendor ├── autoload.php └── composer 复制代码
以上所述就是小编给大家介绍的《用Swoole来写个联机对战游戏呀!(五)联机初始化》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:- 重命名与迁移联机数据文件
- 从动物森友会聊主机游戏联机原理
- 滥用word联机视频特征执行恶意代码POC
- 用Swoole来写个联机对战游戏呀!(一)前言
- 用Swoole来写个联机对战游戏呀!(三)完善游戏功能
- 用Swoole来写个联机对战游戏呀!(四)游戏结束判断
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。