uniapp使用uni自带websocket进行即时通讯详细步骤

 更新时间:2023年11月27日 09:59:54   作者:青岛前端大冤种  
在开发程序过程中通信功能还是比较常用到的,下面这篇文章主要给大家介绍了关于uniapp使用uni自带websocket进行即时通讯的详细步骤,文中通过代码介绍的非常详细,需要的朋友可以参考下

前言

最近再办一个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("退出成功")
		},
	})
},

只是个人简单记录!!!

总结 

到此这篇关于uniapp使用uni自带websocket进行即时通讯的文章就介绍到这了,更多相关uniapp用websocket即时通讯内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 异步javascript的原理和实现技巧介绍

    异步javascript的原理和实现技巧介绍

    因为工作的需要,我要在网页端编写一段脚本,把数据通过网页批量提交到系统中去。所以我就想到了Greasemonkey插件,于是就开始动手写,发现问题解决得很顺利
    2012-11-11
  • JS获取url参数、主域名的方法实例分析

    JS获取url参数、主域名的方法实例分析

    这篇文章主要介绍了JS获取url参数、主域名的方法,结合实例形式分析了javascript针对主机域名、端口、路径名、URL参数等的相关操作技巧,需要的朋友可以参考下
    2016-08-08
  • Bootstrap风格的zTree右键菜单

    Bootstrap风格的zTree右键菜单

    这篇文章主要介绍了Bootstrap风格的zTree右键菜单功能,实现代码分为html,css和js三部分,代码简单易懂,非常不错,需要的朋友可以参考下
    2017-02-02
  • 手把手教你uniapp和uview2.0实现表单校验实战

    手把手教你uniapp和uview2.0实现表单校验实战

    表单提交对大家来说应该都不陌生,这是个很常见的功能,这篇文章主要给大家介绍了关于手把手教你uniapp和uview2.0实现表单校验的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2023-05-05
  • 微信小程序模板(template)使用详解

    微信小程序模板(template)使用详解

    这篇文章主要为大家详细介绍了微信小程序模板template使用的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-01-01
  • JavaScript内置对象Math与String详细介绍

    JavaScript内置对象Math与String详细介绍

    这篇文章主要介绍了JavaScript内置对象Math与String的介绍与使用,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-08-08
  • IE6 弹出Iframe层中的文本框“经常”无法获得输入焦点

    IE6 弹出Iframe层中的文本框“经常”无法获得输入焦点

    IE6间歇性精神障碍 弹出Iframe层中的文本框“经常”无法获得输入焦点的解决方法。
    2009-12-12
  • javascript中的取反再取反~~没有意义

    javascript中的取反再取反~~没有意义

    操作符~, 是按位取反的意思,表面上~~(取反再取反)没有意义,下面有个不错的示例,大家可以参考下
    2014-04-04
  • 如何在postman中添加cookie信息步骤解析

    如何在postman中添加cookie信息步骤解析

    这篇文章主要介绍了如何在postman中添加cookie信息,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-06-06
  • JavaScript实现轮播图特效

    JavaScript实现轮播图特效

    这篇文章主要为大家详细介绍了JavaScript实现轮播图特效,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-04-04

最新评论