【Uniapp封装的websocket，无脑复制，粘贴即可使用】

首先先封装一份websocket.js文件

class websocket{
	constructor(url, time) {
		this.is_open_socket = false //避免重复连接
		this.url = url //地址
		this.data = null
		//心跳检测
		this.timeout = time //多少秒执行检测
		this.heartbeatInterval = null //检测服务器端是否还活着
		this.reconnectTimeOut = null //重连之后多久再次重连
		try {
			return this.connectSocketInit()
		} catch (e) {
			 
			this.is_open_socket = false
			this.reconnect();
		}
	}
 
	// 进入这个页面的时候创建websocket连接【整个页面随时使用】
	connectSocketInit() {
		if(uni.getStorageSync('userinfo')==null){
			   var uid=0
		}else{
			  var uid= uni.getStorageSync('userinfo').id
		}
		this.socketTask = uni.connectSocket({
			url: this.url,
			header: {
					'token':uid
			},
			success: () => {
				console.log("正准备建立websocket中...");
				// 返回实例
				return this.socketTask
			},
		});
		this.socketTask.onOpen((res) => {
			console.log("WebSocket连接正常！");
			clearTimeout(this.reconnectTimeOut)
			clearTimeout(this.heartbeatInterval)
			this.is_open_socket = true;
			this.start();
			// // 注：只有连接正常打开中 ，才能正常收到消息
			//这里处理后端主动推送的消息
			this.socketTask.onMessage((res) => {
					var res=JSON.parse(res.data)
					switch(res.type){
						  case -1://创建聊天室
						      //uiapp自带的跨页面存储信息，也可以使用vuex 缓存聊天信息，在维护vuex聊天信息
						       uni.$emit('getAddChat',res.data)
						      break;
						  case 1:// 更新消息列表
						   uni.$emit('getMsgList',res.data)
						  break;
					      case 2://聊天室最新数据列表
						  uni.$emit('getChatList',res.data)
						   break;
						  case 3://发送消息
						   uni.$emit('getChatSend',res.data)
						  break;
					}
			});
		})
		// 这里仅是事件监听【如果socket关闭了会执行】
		this.socketTask.onClose(() => {
			console.log("已经被关闭了")
			this.is_open_socket = false;
			this.reconnect();
		})
	}
 
	//发送消息
	async send(value) {			 
	  await new Promise((resolve) => {
	    setTimeout(() => {
	      resolve();
	    }, 1000);
	  });
	  // 注：只有连接正常打开中，才能正常成功发送消息
	  this.socketTask.send({
	    data: value,
	    async success() {
	      console.log("消息发送成功",value);
	    },
	  });
	}

	//开启心跳检测
	start() {
		this.heartbeatInterval = setInterval(() => {
			this.data = "心跳"
			this.send(this.data);
		}, this.timeout)
	}
	//重新连接
	reconnect() {
		//停止发送心跳
		clearInterval(this.heartbeatInterval)
		//如果不是人为关闭的话，进行重连
		if (!this.is_open_socket) {
			this.reconnectTimeOut = setTimeout(() => {
				this.connectSocketInit();
			}, 3000)
		}
	}
	//外部获取消息
	getMessage(callback) {
		this.socketTask.onMessage((res) => {
			return callback(res)
		})
	}
 
}
 
module.exports = websocket

引用全局js main.js

//注意引用路径，文件位置随便放
import wsRequest from "@/util/websocke.js"
// // 开启websocket
// let websocket = new wsRequest("wss://域名/wss",5000) //正式环境
let websocket = new wsRequest("ws://127.0.0.1:2346",5000) //本地环境
// //挂载到全局
Vue.prototype.$ws = websocket

聊天室使用

<script>
	export default {

		data() {
			return {
				msgList: [],
			}
		},
		onUnload() {
			// 移除监听事件（注意页面卸载时移除全局使用）
			uni.$off('getMsgList');
		},
		onLoad() {
			this.monitorList()
		},
		onShow(){
			this.getIMList()
		},
		methods: {
			//请求消息列表
			getIMList() {
				let that = this;
				let user_id = ‘用户标识’
				let data = {
					"user_id": user_id,
					"method": "list"
				} 
				//请求消息列表
				that.$ws.send(JSON.stringify(data));
			},
			//实时获取消息列表
			monitorList() {
				uni.showLoading()
				var that = this;
				//此处与uni.$emit 一同使用
				uni.$on('getMsgList', data => {
					that.msgList = data
					uni.hideLoading()
				})
			},
		}
	}
</script>

后端PHP使用tp框架及workerman搭建服务端websocket服务直达链接

后端PHP使用tp框架及workerman搭建服务端websocket服务直达链接