ThinkPHP8集成Swoole，构建高性能SaaS应用

目录

环境准备

安装ThinkPHP8

安装Swoole扩展

TP8配置Swoole

启动Swoole服务器

配置Nginx

重启Nginx

创建Vue前端项目

实现Vue.js前端页面

构建Vue.js前端项目

测试部署

---

环境准备

确保您的服务器满足以下要求（在Linux环境下）：
- PHP >= 8.0
- Nginx 或 Apache
- MySQL >= 5.7
- Redis
- Composer
- Node.js 和 npm

安装ThinkPHP8

1. 使用Composer安装ThinkPHP8：

composer create-project topthink/think tp8

安装Swoole扩展

1. 下载Swoole扩展源码：

git clone https://github.com/swoole/swoole-src.git

2. 进入源码目录并编译安装(swoole主要设计用于Linux环境，window下安装步骤相对多一些，这里不展开)：

cd swoole-src
phpize
./configure --with-php-config=/usr/bin/php-config
make && make install

3. 在`php.ini`文件中添加Swoole扩展：

extension=swoole.so

4. 重启Web服务器使更改生效。

TP8配置Swoole

1. 在tp8项目根目录下创建`swoole.php`文件，内容如下：

<?php
use think\facade\Config;
use think\swoole\Server;

return [
    'server' => [
        'name' => Config::get('app.name'),
        'host' => Config::get('swoole.host', '0.0.0.0'),
        'port' => Config::get('swoole.port', 9501),
        'sock_type' => SWOOLE_SOCK_TCP,
        'worker_num' => Config::get('swoole.worker_num', swoole_cpu_num() * 2),
        'max_request' => Config::get('swoole.max_request', 500),
        'dispatch_mode' => Config::get('swoole.dispatch_mode', 2),
        'open_tcp_nodelay' => true,
        'open_tcp_keepalive' => true,
        'buffer_output_size' => 32 * 1024 * 1024,
        'socket_buffer_size' => 128 * 1024 * 1024,
    ],
    'http' => [
        'host' => Config::get('http.host', '0.0.0.0'),
        'port' => Config::get('http.port', 9502),
        'timeout' => Config::get('http.timeout', 10),
    ],
];

2. 在`config`目录下创建`swoole.php`文件，内容如下：

<?php
return [
    'host' => '0.0.0.0',
    'port' => 9501,
    'worker_num' => swoole_cpu_num() * 2,
    'max_request' => 500,
    'dispatch_mode' => 2,
    'open_tcp_nodelay' => true,
    'open_tcp_keepalive' => true,
    'buffer_output_size' => 32 * 1024 * 1024,
    'socket_buffer_size' => 128 * 1024 * 1024,
];

3. 在`.env`文件中配置Swoole相关信息：
# Swoole配置

SWOOLE_HOST=0.0.0.0
SWOOLE_PORT=9501
SWOOLE_WORKER_NUM=8
SWOOLE_MAX_REQUEST=500
SWOOLE_DISPATCH_MODE=2
SWOOLE_OPEN_TCP_NODELAY=true
SWOOLE_OPEN_TCP_KEEPALIVE=true
SWOOLE_BUFFER_OUTPUT_SIZE=33554432
SWOOLE_SOCKET_BUFFER_SIZE=134217728

启动Swoole服务器

在项目根目录下运行以下命令启动Swoole服务器：

php think swoole start -d

或者使用以下命令启动HTTP服务：
 

php think http start

配置Nginx

编辑Nginx配置文件，通常位于`/etc/nginx/nginx.conf`或`/etc/nginx/sites-available/default`。添加一个新的server块来处理Swoole服务的请求。

server {
    listen 80;
    server_name your_domain.com;

    location / {
        proxy_pass http://127.0.0.1:9502;  # Swoole HTTP服务端口
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }

    location /ws/ {  # WebSocket服务路径
        proxy_pass http://127.0.0.1:9501;  # Swoole TCP服务端口
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_set_header Host $host;
    }
}

重启Nginx

sudo systemctl restart nginx

创建Vue前端项目

1. 在项目根目录下创建一个新的Vue.js项目：

npm init vue@latest frontend

2. 进入前端项目目录：

cd frontend

3. 安装依赖：
 

npm install

实现Vue.js前端页面

1. 编辑`frontend/src/App.vue`文件，内容如下：

<template>
  <div id="app">
    <div id="chat"></div>
    <input type="text" id="message" placeholder="输入消息...">
    <button id="send">发送</button>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue';
import SockJS from 'sockjs-client';

export default {
  setup() {
    const chat = ref('');
    const message = ref('');
    const socket = new SockJS('http://your_domain.com/ws');

    onMounted(() => {
      socket.onopen = () => {
        console.log('连接成功');
      };

      socket.onmessage = (event) => {
        chat.value += event.data + '\n';
      };
    });

    const sendMessage = () => {
      socket.send(message.value);
      message.value = '';
    };

    return {
      chat,
      message,
      sendMessage,
    };
  },
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

2. 编辑`frontend/src/router/index.js`文件，内容如下：

import { createRouter, createWebHistory } from 'vue-router';
import App from '../App.vue';

const routes = [
  {
    path: '/',
    name: 'Chat',
    component: App,
  },
];

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes,
});

export default router;

3. 编辑`frontend/src/main.js`文件，内容如下：
 

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';

createApp(App).use(router).mount('#app');

构建Vue.js前端项目

npm run build

将Vue.js构建结果复制到ThinkPHP8项目中
将`frontend/dist`目录下的所有文件复制到ThinkPHP8项目的`public`目录下。

测试部署

打开浏览器，访问`http://your_domain.com`，如果看到Vue.js实现的聊天室页面，并且可以正常发送和接收消息，说明Nginx、Swoole和Vue.js已经成功集成并部署。

通过以上步骤，展示了如何利用Swoole的高性能网络通信能力和Vue.js的前端框架来构建实时应用。