<think>我们正在
使用ThinkPHP8和Vue3来实现WebSocket连接。根据引用内容，我们可以知道在
ThinkPHP中可以
使用Workerman或GatewayWorker（基于Workerman）来搭建WebSocket服务。在Vue3中，我们可以
使用原生的WebSocket或者兼容性更好的socket.io-client（如果需要更好的兼容性，尤其是在小程序或App中）。但根据用户要求，我们
使用原生WebSocket。
步骤：
1. 后端（
ThinkPHP8）搭建WebSocket服务器。
2. 前端（Vue3）建立WebSocket连接，并处理消息。
参考引用[1][2][4][
5]，我们可以采用以下方法：
后端（
ThinkPHP8）:
由于
ThinkPHP8默认不包含Workerman，我们需要通过Composer安装Workerman。
安装Workerman:
```bash
composer require workerman/workerman
```
然后，我们可以创建一个
自定义命令来启动WebSocket服务器。在
ThinkPHP8中，我们可以创建一个
命令行工具类。
例如，在`app/command`目录下创建`WebSocket.php`:
```php
<?php
namespace app\command;
use think\console\Command;
use think\console\Input;
use think\console\Ou
tput;
use Workerman\Worker;
class WebSocket extends Command
{
protected function configure()
{
$this->setName('websocket:start')->setDescription('Start WebSocket server');
}
protected function execute(Input $input, Ou
tput $ou
tput)
{
// 创建一个Worker监听234
5端口，
使用websocket协议通讯
$ws_worker = new Worker('websocket://0.0.0.0:234
5');
// 启动4个进程对外提供服务
$ws_worker->count = 4;
// 当收到客户端发来的数据后返回给客户端
$ws_worker->onMessage = function($connection, $data) {
// 向客户端发送数据
$connection->send('Server received: ' . $data);
};
// 运行worker
Worker::runAll();
}
}
```
然后，我们需要在`config/console.php`中注册这个命令：
```php
return [
'commands' => [
'websocket:start' => 'app\command\WebSocket',
],
];
```
启动服务：
```bash
php think websocket:start
```
这样，WebSocket服务器就在234
5端口上运行了。
前端（Vue3）:
在Vue3中，我们可以
使用原生WebSocket API。为了更好的管理，我们可以将WebSocket封装成一个可复用的模块（例如
使用Composition API或Pinia）。
这里我们参考引用[1]和[4]，
使用Pinia来管理WebSocket连接。
首先，安装Pinia（如果尚未安装）：
```bash
npm install pinia
```
然后，在`src/stores`目录下创建一个`websocket.js`：
```javascript
import { defineStore } from 'pinia';
export const useWebSocketStore = defineStore('websocket', {
state: () => ({
websocket: null,
messages: [],
online: false,
}),
actions: {
// 建立连接
connect() {
// 如果已经连接或者正在连接，则不再创建
if (this.websocket && this.websocket.readyState === WebSocket.OPEN) {
return;
}
// 创建WebSocket连接，这里假设后端运行在本地234
5端口
this.websocket = new WebSocket('ws://localhost:234
5');
// 连接成功
this.websocket.onopen = () => {
this.online = true;
console.log('WebSocket connected');
};
// 接收消息
this.websocket.onmessage = (event) => {
this.messages.push(event.data);
};
// 连接关闭
this.websocket.onclose = () => {
this.online = false;
console.log('WebSocket disconnected');
};
// 错误处理
this.websocket.onerror = (error) => {
console.error('WebSocket error:', error);
};
},
// 发送消息
send(message) {
if (this.websocket && this.websocket.readyState === WebSocket.OPEN) {
this.websocket.send(message);
} else {
console.error('WebSocket is not connected');
}
},
// 关闭连接
disconnect() {
if (this.websocket) {
this.websocket.close();
this.websocket = null;
this.online = false;
}
},
},
});
```
在Vue组件中
使用：
```vue
<template>
<div>
<button @click="connect">连接</button>
<button @click="disconnect">断开</button>
<input v-model="message" type="text" />
<button @click="send">发送</button>
<ul>
<li v-for="(msg, index) in messages" :key="index">{{ msg }}</li>
</ul>
</div>
</template>
<script setup>
import { ref } from 'vue';
import { useWebSocketStore } from '@/stores/websocket';
const store = useWebSocketStore();
const message = ref('');
const connect = () => {
store.connect();
};
const disconnect = () => {
store.disconnect();
};
const send = () => {
if (message.value.trim() !== '') {
store.send(message.value);
message.value = '';
}
};
</script>
```
注意：以上是一个简单示例。实际应用中，你可能需要处理更复杂的消息格式（如JSON），以及重连机制等。
另外，如果考虑跨域问题，需要在WebSocket服务器端设置允许跨域（如设置HT
TP头），但Workerman本身不涉及浏览器跨域，因为WebSocket协议本身支持跨域，但浏览器会检查服务器是否在同一个域或是否允许跨域。如果前端和后端WebSocket服务器不在同一个域，需要确保WebSocket服务器支持跨域（通常通过设置`Origin`头验证，或者
使用Nginx代理）。
以上代码实现了基本的WebSocket通信。根据引用[
5]，如果你需要更复杂的功能（如用户认证、群聊等），你可能需要
使用GatewayWorker，它提供了更丰富的功能。
引用[2]提到了
使用phpsocket.io，但这里我们
使用原生WebSocket，因为Vue3中可以直接
使用WebSocket API。
总结：
1. 后端通过Workerman创建WebSocket服务器。
2. 前端Vue3
使用Pinia管理WebSocket连接，包括连接、发送消息、接收消息和断开连接。
注意：在生产环境中，你可能需要配置SSL（wss://）以确保安全。
相关问题：
1. 如何在
ThinkPHP8中
使用Workerman实现WebSocket服务器？
2. Vue3中如何封装WebSocket连接？
3. WebSocket通信中如何实现用户认证？
4. 如何实现WebSocket的重连机制？
5. 如何保证WebSocket通信的安全性（
使用wss）？</think>###
ThinkPHP8 与 Vue3 实现 WebSocket 连接指南
#### 一、后端实现（
ThinkPHP8 + Workerman）
1. **安装依赖**
```bash
composer require workerman/workerman
```
2. **创建 WebSocket 服务** (`app/socket/WebSocket.php`)
```php
<?php
namespace app\socket;
use Workerman\Worker;
use think\facade\Db;
class WebSocket
{
public function start()
{
$worker = new Worker('websocket://0.0.0.0:2346');
$worker->count = 4;
$worker->onConnect = function ($connection) {
echo "New connection\n";
};
$worker->onMessage = function ($connection, $data) {
// 处理消息逻辑 (示例：广播消息)
foreach ($worker->connections as $client) {
$client->send(json_encode([
'type' => 'message',
'data' => $data
]));
}
};
$worker->onClose = function ($connection) {
echo "Connection closed\n";
};
Worker::runAll();
}
}
```
3. **创建启动命令** (`app/command/Socket.php`)
```php
<?php
namespace app\command;
use think\console\Command;
use think\console\Input;
use think\console\Ou
tput;
use app\socket\WebSocket;
class Socket extends Command
{
protected function configure()
{
$this->setName('socket:start')->setDescription('Start WebSocket server');
}
protected function execute(Input $input, Ou
tput $ou
tput)
{
(new WebSocket())->start();
}
}
```
4. **启动服务**
```bash
php think socket:start
```
#### 二、前端实现（Vue3 + WebSocket）
1. **创建 WebSocket 工具** (`src/utils/socket.js`)
```javascript
import { ref } from 'vue'
export function useWebSocket(url) {
const socket = ref(null)
const messages = ref([])
const isConnected = ref(false)
const connect = () => {
socket.value = new WebSocket(url)
socket.value.onopen = () => {
isConnected.value = true
console.log('WebSocket connected')
}
socket.value.onmessage = (event) => {
messages.value.push(JSON.parse(event.data))
}
socket.value.onerror = (error) => {
console.error('WebSocket error:', error)
}
socket.value.onclose = () => {
isConnected.value = false
console.log('WebSocket disconnected')
}
}
const send = (data) => {
if (isConnected.value) {
socket.value.send(JSON.stringify(data))
}
}
const disconnect = () => {
if (socket.value) {
socket.value.close()
}
}
return {
messages,
isConnected,
connect,
send,
disconnect
}
}
```
2. **在组件中
使用** (`src/components/Chat.vue`)
```vue
<template>
<div>
<button @click="connect">连接</button>
<button @click="disconnect">断开</button>
<input v-model="message" placeholder="输入消息">
<button @click="sendMessage">发送</button>
<ul>
<li v-for="(msg, index) in messages" :key="index">
{{ msg.data }}
</li>
</ul>
</div>
</template>
<script setup>
import { ref } from 'vue'
import { useWebSocket } from '@/utils/socket'
const { messages, isConnected, connect, send, disconnect } = useWebSocket(
'ws://localhost:2346'
)
const message = ref('')
const sendMessage = () => {
if (message.value.trim()) {
send({
type: 'message',
content: message.value,
timestamp: Date.now()
})
message.value = ''
}
}
</script>
```
#### 三、关键配置说明
1. **跨域处理**：在 Workerman 中需添加 HT
TP 头
```php
$worker->onConnect = function ($connection) {
$connection->headers = [
'Access-Control-Allow-Origin' => '*',
'Access-Control-Allow-Methods' => 'GET,POST'
];
};
```
2. **用户认证**：在连接时验证用户身份
```php
$worker->onMessage = function ($connection, $data) {
$data = json_decode($data, true);
if ($data['type'] === 'auth') {
$user = Db::name('users')->where('token', $data['token'])->find();
if ($user) {
$connection->user_id = $user['id'];
}
}
};
```
3. **生产环境配置**：
-
使用 Nginx 反向代理 WebSocket
- 配置 SSL 证书启用 wss
```nginx
location /websocket {
proxy_pass ht
tp://127.0.0.1:2346;
proxy_ht
tp_version 1.1;
proxy_set_header Upgrade $ht
tp_upgrade;
proxy_set_header Connection "upgrade";
}
```
#### 四、常见问题解决
1. **连接失败**：
- 检查防火墙是否开放端口 `2346`
- 确认后端服务已启动 `netstat -tulnp | grep 2346`
- 前端
使用 `ws://localhost:2346` 开发环境连接
2. **消息格式**：
- 推荐统一
使用 JSON 格式
- 添加消息类型字段区分
指令
```json
{
"type": "message|auth|system",
"data": {...}
}
```
3. **断线重连**（前端优化）：
```javascript
let reconnectInterval = null
const reconnect = () => {
clearInterval(reconnectInterval)
reconnectInterval = setInterval(() => {
if (!isConnected.value) {
console.log('尝试重连...')
connect()
}
},
5000)
}
socket.value.onclose = () => {
isConnected.value = false
reconnect() // 启动重连机制
}
```
> 此方案已实现基础通信功能，实际项目中需扩展：<br>
> - 消息持久化存储（MySQL/Redis）<br>
> - 用户在线状态管理<br>
> - 消息广播/私聊区分<br>
> - 心跳检测机制（防止连接超时）[^1][^
5]
---
### 相关问题
1. 如何实现 WebSocket 消息的数据库持久化存储？
2. Vue3 中如何处理 WebSocket 的跨域问题？
3. Workerman 如何实现多服务器集群部署？
4. WebSocket 通信中如何保证数据安全性（加密传输）？
5. 如何通过心跳检测维持 WebSocket 长连接稳定性？
> 引用说明：
> [^1]: 基于
ThinkPHP5 WorkerMan Vue3 实现的简易聊天室
> [^
5]:
ThinkPHP 和 Vue 基于 Workerman 搭建 WebSocket 服务的完整方案
本文介绍如何在 ThinkPHP 5.1 中创建自定义命令，包括创建命令类、配置命令及在控制器中调用命令的方法。同时介绍了快速生成指令的功能。
扫一扫
888
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
