用Swoole来写个联机对战游戏呀五联机初始化

联机逻辑开发进度:□□□□□□□□□□□□

本章结束开发进度:■■□□□□□□□□□□

Swoole开发环境

教程使用Swoole 4.3.0版本开发,但并没有使用协程等功能,只是使用了WebSocket Server,理论上安装旧版也是没问题的。环境需要大家自行安装,这个也是学习的一个过程。

以下是一些有可能有帮助的资料:

  • CentOS中一键安装PHP开发环境:https://lnmp.org/install.html
  • Swoole安装教程:https://wiki.swoole.com/wiki/…
  • Redis安装教程:https://redis.io/download
  • php-redis扩展包:http://pecl.php.net/package/r…

童鞋们也可以像我一样在Windows使用PHPStorm进行开发,再通过一些方法如共享文件夹WinSCP等工具将项目在CentOS中运行起来。

安装swoole-ide-helper扩展

使用PHPStorm来开发Swoole项目的童鞋,如果不想面向运气编程的话,最好安装一个swoole-ide-Helper扩展来协作开发。

在项目根目录运行以下命令:

composer require --dev "eaglewu/swoole-ide-helper:dev-master"

安装完毕我们就可以愉快地编写Swoole代码了。

服务端基本架构

赵童鞋设想的基本架构需要三个层,他们分别是:

  • 网络层:管理Swoole WebSocket对象,主要负责接收前端消息,传递到逻辑层进行处理。
  • 逻辑层:接收网络层传递的消息,主要负责游戏房间创建、玩家移动、结束检测等游戏逻辑。
  • 数据层:用于管理玩家ID、房间ID、匹配队列等数据。

管理这三个层分别需要三个类:ServerLogicDataCenter

其中最重要的就是Server类,它的作用就是作为服务端和客户端的消息交换中心,我们先来写一个初始化的Server类,在项目app目录新建Server.php

  1. 使用面向对象的方式实现一个WebSocket Server类。
  2. 分别绑定startworkerStartopenmessageclose回调方法
  3. 在类中引入composer自动加载机制。
  4. WebSocket对象设置4个worker进程。
  • Swoole Websocket:https://wiki.swoole.com/wiki/…

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.phpDataCenter.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-ifv-for<template>WebSocket技术。如果没有接触过前端框架的童鞋,可以尝试阅读官方文档。

  • Vue官方文档:https://cn.vuejs.org/v2/guide/
  • v-if:https://cn.vuejs.org/v2/guide…
  • v-for:https://cn.vuejs.org/v2/guide…
  • <templater>:https://cn.vuejs.org/v2/guide…

在项目根目录创建frontend文件夹,并在其中创建index.html文件,进行前端初始化。

  1. 使用CDN的形式引入Vue框架。
  2. 根据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请求获取到这个页面呢?这时候就需要使用SwooleStatic Handler功能。

  • Swoole Static Handler文档:https://wiki.swoole.com/wiki/…
  1. 根据官方文档添加Swoole Static Handler配置。
  2. 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.onmessagewebsock.onopenwebsock.onerrorwebsock.onclose

以下是一些有可能有帮助的资料。

  • 阮一峰WebSocket教程:http://www.ruanyifeng.com/blo…
  • Vue生命周期:https://cn.vuejs.org/v2/guide…
  • Swoole WebSocket onMessage: https://wiki.swoole.com/wiki/…
  1. Vue实例新增data属性websock,在Vue实例创建完毕后,初始化WebSocket连接服务端并绑定上述四个方法。
  2. WebSocket对象建立连接后,立刻发送消息到服务端。
  3. 服务端接收到客户端发送的消息后,通过客户端的fd返回一条消息。
  4. 服务端增加客户端连接日志输出。
  5. 在页面关闭时,断开WebSocket连接。
  • 不清楚fd是什么的童鞋可以参考Swoole官方文档:https://wiki.swoole.com/wiki/…

本章项目初始化就到这里啦,请童鞋们尽量完成自己的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

评论

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

这个站点使用 Akismet 来减少垃圾评论。了解你的评论数据如何被处理