目录
环境准备
安装ThinkPHP8
安装Swoole扩展
TP8配置Swoole
启动Swoole服务器
配置Nginx
重启Nginx
创建Vue前端项目
实现前端页面
构建前端项目
测试部署
环境准备
确保您的服务器满足以下要求（在Linux环境下）：
- PHP >= 8.0
- Nginx 或 Apache
- MySQL >= 5.7
- Redis
- Composer
- 和 npm
安装ThinkPHP8
1. 使用Composer安装ThinkPHP8：
composer create-project topthink/think tp8安装Swoole扩展
1. 下载Swoole扩展源码：（访问不了github就用加速器steam++）
git clone /swoole/
2. 进入源码目录并编译安装(swoole主要设计用于Linux环境，window下安装步骤相对多一些，这里不展开)：
cd swoole-src
phpize
./configure --with-php-config=/usr/bin/php-config
make && make install
3. 在``文件中添加Swoole扩展：
extension=
4. 重启Web服务器使更改生效。
TP8配置Swoole
1. 在tp8项目根目录下创建``文件，内容如下：
<?php
use think\facade\Config;
use think\swoole\Server;
return [
'server' => [
'name' => Config::get(''),
'host' => Config::get('', '0.0.0.0'),
'port' => Config::get('', 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('', '0.0.0.0'),
'port' => Config::get('', 9502),
'timeout' => Config::get('', 10),
],
];
2. 在`config`目录下创建``文件，内容如下：
<?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/`或`/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. 在项目根目录下创建一个新的项目：
npm init vue@latest frontend
2. 进入前端项目目录：
cd frontend
3. 安装依赖：
npm install实现前端页面
1. 编辑`frontend/src/`文件，内容如下：
<template>
<div >
<div ></div>
<input type="text" placeholder="输入消息...">
<button >发送</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(() => {
= () => {
('连接成功');
};
= (event) => {
+= + '\n';
};
});
const sendMessage = () => {
();
= '';
};
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/`文件，内容如下：
import { createRouter, createWebHistory } from 'vue-router';
import App from '../';
const routes = [
{
path: '/',
name: 'Chat',
component: App,
},
];
const router = createRouter({
history: createWebHistory(.BASE_URL),
routes,
});
export default router;3. 编辑`frontend/src/`文件，内容如下：
import { createApp } from 'vue';
import App from './';
import router from './router';
createApp(App).use(router).mount('#app');构建前端项目
npm run build将构建结果复制到ThinkPHP8项目中
将`frontend/dist`目录下的所有文件复制到ThinkPHP8项目的`public`目录下。
测试部署
打开浏览器，访问`http://your_domain.com`，如果看到实现的聊天室页面，并且可以正常发送和接收消息，说明Nginx、Swoole和已经成功集成并部署。
通过以上步骤，展示了如何利用Swoole的高性能网络通信能力和的前端框架来构建实时应用。