第一步:import io from 'socket.io-client';注意和后台socket版本需要匹配
第二部:// 获取 Socket 实例
getSocketInstance() {
if (this.socketManager && this.socketManager.isSocketConnected()) {
return this.socketManager;
}
// 如果没有可用的Socket管理器,创建一个新的
this.socketManager = socketManager;
return this.socketManager;
},
// Socket 兼容性配置
getSocketConfig(transportType = 'websocket') {
const baseConfig = {
timeout: this.socketConfig.timeout,
forceNew: true,
upgrade: true, // 支持升级到 WebSocket
rememberUpgrade: true,
reconnection: true,
reconnectionAttempts: this.socketConfig.reconnectAttempts,
reconnectionDelay: this.socketConfig.reconnectDelay,
reconnectionDelayMax: this.socketConfig.reconnectDelay * 2,
maxReconnectionAttempts: this.socketConfig.reconnectAttempts,
autoConnect: false, // 手动控制连接
path: this.socketConfig.path // 使用配置的路径
};
// 支持 websocket 传输
const config = {
...baseConfig,
transports: [transportType],
upgrade: true
};
return config;
},
// 初始化 Socket 连接
initializeSocket() {
// 防止重复初始化
if (this.socketInitialized && this.socketManager && this.socketManager.isSocketConnected()) {
console.log("Socket already initialized and connected, skipping initialization");
return;
}
// 如果socket存在但未连接,先清理
if (this.socketManager) {
console.log("Cleaning up existing socket connection");
this.socketManager.disconnect();
this.socketManager = null;
}
// 重置初始化标记
this.socketInitialized = false;
},
第三步:// Socket 连接管理器
createSocketManager(url) {
try {
// 使用Socket管理器
this.socketManager = socketManager;
this.socketManager.connect(url);
// 设置事件监听器
this.socketManager.on('connect', () => {
this.connectionStatus = 'connected';
this.clearErrorMessage();
const dic = {
uid: uni.getStorageSync('uid'),
token: uni.getStorageSync('token'),
roomnum: this.liveDic.uid,
stream: this.liveDic.stream
}
this.socketManager.emit('conn', dic);
this.socketManager.emit('startCardGame');
this.socketManager.emit('startCut');
this.socketManager.emit('cutCard');
this.socketManager.emit('startBet');
this.socketManager.emit('startShake');
this.socketManager.emit('shakeCard');
this.socketManager.emit('startOpen');
this.socketManager.emit('endCaculate');
this.socketManager.emit('down_banker');
this.socketManager.emit('shuffle_cards');
// 连接成功后,加入房间
// this.joinSocketRoom();
});
this.socketManager.on('disconnect', (res) => {
console.log(res, 'res1')
});
this.socketManager.on('conn', (res) => {
console.log(res, 'res2')
});
this.socketManager.on('broadcastingListen', (res) => {
console.log(res, 'res3')
this.onBroadcastingListen(res)
});
this.socketManager.on('connect_error', (error) => {
console.error('❌ Socket 连接错误:', error);
this.connectionStatus = 'error';
this.setErrorMessage(`Socket 连接错误: ${error.message}`);
});
this.socketManager.on('disconnect', (reason) => {
console.log('Socket 断开连接:', reason);
});
this.socketManager.on('error', (error) => {
console.error('Socket 错误:', error);
this.connectionStatus = 'error';
this.setErrorMessage(`Socket 错误: ${error.message}`);
});
// 监听直播相关事件
this.socketManager.on('liveImage', (data) => {
console.log('收到直播画面更新:', data);
if (data && data.imageUrl) {
this.liveImage = data.imageUrl;
}
});
this.socketManager.on('roomInfo', (data) => {
console.log('收到房间信息更新:', data);
if (data && data.title) {
this.roomTitle = data.title;
}
if (data && data.onlineCount !== undefined) {
this.onlineCount = data.onlineCount;
}
});
this.socketManager.on('gameData', (data) => {
console.log('收到游戏数据:', data);
});
return this.socketManager;
} catch (error) {
console.error('创建 Socket 连接管理器失败:', error);
throw error;
}
},
发送scoket:this.socketManager.emit(event, data);