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

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

一、使用uni封装好的websocket。

下面的从uniapp官网截图的Api

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

// 创建webSocketthis.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("退出成功")		},	})},

只是个人简单记录！！！