最近再办一个uniapp做的即时通讯，把其中思路记载一下。

技术栈采用uniapp+uview+vue2进行开发。

一、使用uni封装好的websocket。

下面的从uniapp官网截图的Api

 uni.connectSocket() ：这个方法可以让我们创建一个webSocket的连接，里面包含几个参数，url是写ws的连接地址，没有的话肯定是连接不上服务器，其他的没用过。用的时候再看。

// 创建webSocket this.webSocketTask = uni.connectSocket({ 	url: '这里面写的是连接地址', 	header: { 	    'content-type': 'application/json' 	}, 	success(res) { 		console.log('成功', res); 	}, })

我们在data中定义一个webSocket：null，然后把websocket对象赋给他，以供下面的方法使用。

 uni.onSocketOpen()是用来监听websocket连接成功的事件，方法里面跟一个回调函数，可以通过res参数拿到响应头。

//监听WebSocket连接打开事件 this.webSocketTask.onOpen((res) => { 	console.info("监听WebSocket连接打开事件", res) });

 这个没用过，过！！！

 通过uni.onSocketMessag()可以接收到服务器返回的消息。

//接收websocket消息及处理 this.webSocketTask.onMessage((res) => { 	let data = JSON.parse(res.data); //判断服务器返回的type类型 	switch (data.type){ 		//如果返回的ping，说明服务端ping客户端 		case 'ping':             //我们要给服务器说一个pong告诉服务器我还活着 			this.webSocketTask.send({ 				data: JSON.stringify({ 					type: 'pong' 				}) 			}); 			break; 		//登录更新用户列表         //如果type是init，说明服务器知道我们活着，给我们传一个标识，我们通过这个标识去请求接口，                                       建立唯一链接。 		case 'init': 			uni.setStorageSync('client_id', data.client_id); 			this.$u.post('common/pub/bindUid',{ 				client_id: data.client_id, 				user_id: this.userId 			}).then(res => { 				this.webSocketTask.send({ 					data: JSON.stringify({ 						type: 'bindUid', 						user_id:2 					}) 				}); 			}); 			break; 		case 'simple': 			this.userList.push(data.data) 			this.scrollToBottom() 			break; 		case 'group': 			this.userList.push(data.data) 			this.scrollToBottom() 			break 	}

这个的话按官方文档说的就是需要卸载uni。onSocketOpen回调里面才行。但是我直接通过实例对象发也可以。

this.webSocketTask.send({ 	data: JSON.stringify({type: 'pong'}) });

注意：websocket只能接收字符串，记得转换类型

这个就是关闭连接，写在onUnload钩子中就行

onUnload(){ 	uni.closeSocket({ 		success:() => { 			console.info("退出成功") 		}, 	}) },

 最后一个就是监听websocket是否关闭。

uniapp官网文档：uni.connectSocket(OBJECT) | uni-app官网 (dcloud.net.cn)https://uniapp.dcloud.net.cn/api/request/websocket.html

uni-app官网 (dcloud.net.cn)https://uniapp.dcloud.net.cn/api/request/socket-task.html完整代码：

onLoad(){     this.socket() };   methods:{     socket(){     //创建webSocket     this.webSocketTask = uni.connectSocket({ 	    url: 'ws地址', 		header: { 			'content-type': 'application/json' 		}, 		success(res) { 			console.log('成功', res); 		}, 	})  	// 监听WebSocket连接打开事件 	this.webSocketTask.onOpen((res) => { 		console.info("监听WebSocket连接打开事件", res) 	});  	// 监听WebSocket错误 	uni.onSocketError((res) => { 		console.info("监听WebSocket错误" + res) 	}); }  onShow(){     // 接收websocket消息及处理     this.webSocketTask.onMessage((res) => { 		let data = JSON.parse(res.data); 		switch (data.type) { 			// 服务端ping客户端 			case 'ping': 				this.webSocketTask.send({ 					data: JSON.stringify({ 						type: 'pong' 					}) 				}); 				break; 			// 登录 更新用户列表 			case 'init': 				uni.setStorageSync('client_id', data.client_id); 				this.$u.post('接口', { 					client_id: data.client_id, 					user_id: this.userId 				}).then(res => { 					this.webSocketTask.send({ 						data: JSON.stringify({ 							type: 'bindUid', 							user_id: this.userId 						}) 					}); 				}); 				break; 			case 'simple': 				this.userList.push(data.data) 				this.scrollToBottom() 				break; 			case 'group': 				// this.groupMenuList() 				this.userList.push(data.data) 				this.scrollToBottom() 				break 		}  	}); }  onUnload() { 	uni.closeSocket({ 		success: () => { 			console.info("退出成功") 		}, 	}) },

只是个人简单记录！！！