宝塔部署websocket服务,后台fastadmin,用户端uniapp

一,项目根目录创建 websocket文件夹

文件夹下创建websocket服务server.php

php 复制代码
<?php
require_once __DIR__ . '/../vendor/autoload.php';

use Workerman\Worker;
use Workerman\Connection\TcpConnection;

// 创建 WebSocket 服务器,监听 2345 端口
$ws_worker = new Worker("websocket://0.0.0.0:2345");

// 启动 4 个进程对外提供服务
$ws_worker->count = 4;

// 保存所有客户端连接
$clients = [];

// 当有客户端连接时
$ws_worker->onConnect = function(TcpConnection $connection) use (&$clients) {
    $connection->onWebSocketConnect = function(TcpConnection $connection) use (&$clients) {
        // 保存连接
        $clients[$connection->id] = $connection;
        echo "New connection: {$connection->id}\n";
    };
};

// 当收到客户端消息时
$ws_worker->onMessage = function(TcpConnection $connection, $data) use (&$clients) {
    // 广播消息给所有客户端
    foreach ($clients as $client) {
        $client->send($data);
    }
};

// 当客户端断开连接时
$ws_worker->onClose = function(TcpConnection $connection) use (&$clients) {
    // 移除连接
    unset($clients[$connection->id]);
    echo "Connection closed: {$connection->id}\n";
};

// 运行 worker
Worker::runAll();

二,启动websocket服务

命令行:php websocket/server.php start,提示php版本不对,查看项目虽然是php7.4但是实际上环境变量是7.2

三,修改环境变量

bash 复制代码
#移除现有的
rm -f /usr/bin/php 

#新增php7.4
ln -sf /www/server/php/74/bin/php /usr/bin/php

#查看最新的
php -v

四,运行websocket服务

bash 复制代码
php websocket/server.php start

五,用户端连接

javascript 复制代码
connet_sock(){
	var socketUrl = 'ws://119.91.135.15:2345';
	this.ST = uni.connectSocket({
		url: socketUrl,
		complete: (e) => {
			console.log(e)
		},
		fail: (f) => {
			console.log(f);
		},
		success: (s) => {
			
			uni.onSocketOpen((res) => {
				console.log('连接成功');
			});

			uni.onSocketMessage((res) => {
				console.log(typeof(res.data));
				const data = JSON.parse(res.data);
				console.log(data)
			
				if(res.data.length>0){
					console.log('接收到服务端发送的消息', res);
					console.log(res.data)
				}
				
			})
			uni.onSocketOpen(function(res) {
				console.log('WebSocket连接已打开!');
			});
			uni.onSocketClose((res) => {
				console.log(res);
				if (!this.ST) {
					return;
				}
				uni.showToast({
					title: '与服务器连接中断,请重新刷新页面!',
					icon: 'loading'
				})
				clearInterval(this.t1);
				this.isLogin = false
				this.ST = false;
				this.timer = setTimeout(() => {
					this.open()
				}, 5000)
			});
			uni.onSocketError((res) => {
				uni.showToast({
					title: '与服务器连接错误,请重新刷新页面!',
					icon: 'loading'
				})
				this.timer = setTimeout(() => {
					this.open()
				}, 5000)
			});
		}
	});
},

//发送消息
send_msg(msg) {
	let str = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
	let result = '';
	var len = 10;
	while (len--) {
		let index = Math.floor(Math.random() * str.length);
		result += str[index];
	}
	
	if(this.is_close == 0){
		var data =  {
			type: 'MODEL_TALK',
			text: '请问情人节一般你会送什么礼物',
			messageCode: result,
		}
	}else{
		var data =  {
			type: 'MODEL_TALK',
			text: '如果给你一百万,你会怎么花',
			messageCode: result,
		}
	}
	uni.sendSocketMessage({
		data: JSON.stringify(data),
		success(res) {
			console.log(res);
			console.log('消息发送成功!')
		},
		fail(err) {
			console.log(err);
			console.log('消息发送失败!')
		}
	})
},

写在后面:

1,如果用户端无法连接,确认安全组是否有放行

2,服务端websocket服务地址需要写 0.0.0.0 ,否则外网无法连接

相关推荐
小时前端2 小时前
微信小程序选不了本地文件?用 web-view + H5 一招搞定
前端·微信小程序·uni-app
Mr_li19 小时前
给 Vue 开发者的 uni-app 快速指南
vue.js·uni-app
anyup21 小时前
🔥2026最推荐的跨平台方案:H5/小程序/App/鸿蒙,一套代码搞定
前端·uni-app·harmonyos
Mintopia2 天前
Vue3 项目如何迁移到 uni-app x:从纯 Web 到多端应用的系统指南
uni-app
Mintopia2 天前
uni-app x 发展前景技术分析:跨端统一的新阶段?
uni-app
不爱说话郭德纲3 天前
告别漫长的HbuilderX云打包排队!uni-app x 安卓本地打包保姆级教程(附白屏、包体积过大排坑指南)
android·前端·uni-app
HashTang4 天前
【AI 编程实战】第 12 篇:从 0 到 1 的回顾 - 项目总结与 AI 协作心得
前端·uni-app·ai编程
JunjunZ4 天前
uniapp 文件预览:从文件流到多格式预览的完整实现
前端·uni-app
郑州光合科技余经理5 天前
代码展示:PHP搭建海外版外卖系统源码解析
java·开发语言·前端·后端·系统架构·uni-app·php
TT_Close5 天前
“啪啪啪”三下键盘,极速拉起你的 uni-app 项目!
vue.js·uni-app·前端工程化