目录
环境准备
确保您的服务器满足以下要求(在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的前端框架来构建实时应用。