Uniapp之WebSocket使用攻略_uniapp使用webscock如何传token-程序员宅基地

技术标签: JS应用  websocket  # uniapp  前端  vue.js  网络协议  javascript  

websocket是什么?

是一種網路傳輸協定,可在單個TCP連接上進行全雙工通訊,位於OSI模型應用層。WebSocket協定在2011年由IETF標準化為RFC 6455,後由RFC 7936補充規範。Web IDL中的WebSocket API由W3C標準化。

WebSocket使得客戶端和伺服器之間的資料交換變得更加簡單,允許伺服器端主動向客戶端推播資料。在WebSocket API中,瀏覽器和伺服器只需要完成一次交握,兩者之間就可以建立永續性的連接,並進行雙向資料傳輸

                                                                                                            ------------------维基百科

 接下来直接上代码:

var sys = require("../sysconfig.json");
//检查websocket是否链接
function checkSocketState(){
	uni.sendSocketMessage({
		data:"",
		success: (res) => {
			console.log('已连接',res)
			return;
		},
		fail: (err) => {
			console.log('链接失败',err)
			openWebSockeMessage()
		}
	})
}
//监听心跳
function sendSocke(){
	uni.onSocketMessage(function (res) {
	  // console.log('收到服务器内容:' + res.data);
		var obj = JSON.parse(res.data);
		if (obj.type == 1) { //收到聊天消息
			var chatMessage = JSON.parse(obj.message)
			console.log(chatMessage)
			openMuisc(1)
			uni.$emit("webSockeMessage",{message:chatMessage})
		} else if (obj.type == 2) { //服务器发出的心跳
			console.log('心跳',res)
		} else if (obj.type == 3) { //收到服务器的心跳回应
			getApp().globalData.pongtime = new Date().getTime();
		}
		else if (obj.type == "changeServer") { //收到服务器的心跳回应
			var talkrecord = JSON.parse(obj.message)//会话
			openMuisc(2)
			uni.$emit("webSocketalkrecord",{message:talkrecord})
			
		}
	});
}
//收到消息提示音频播放
function openMuisc(type){
	let music = null;
	music = uni.createInnerAudioContext(); //创建播放器对象
	if(type==1){
		music.src= "/static/move/bofang.mp3"; 
	}else{
		music.src= "/static/move/bofang.mp3"; 
	}
	music.play(); //执行播放
}
//维持心跳
function MaintainHeartbeat(){

	getApp().globalData.pongtime= new Date().getTime()
	pongtime =getApp().globalData.pongtime;
	if(getApp().globalData.intTime){
		clearInterval(getApp().globalData.intTime)
	}
	let intTime= setInterval(function() {
		console.log("发送信息维持心跳")
		if (new Date().getTime() - pongtime > 1000 * 30) {
			//超时清除上一个链接,重新创建一个新的链接
			clearInterval(getApp().globalData.intTime)
			clearInterval(intTime)
			uni.closeSocket({
				success: (res) => {
					console.log("关闭成功")
					openWebSockeMessage()
				}
			})
		}
		var clientXintiao = {
			type: 3,
			message: ""
		}
		uni.sendSocketMessage({
			data: JSON.stringify(clientXintiao),
			success: (res) => {
				console.log('成功',res)
			},
			fail: (err) => {
				clearInterval(intTime)
				console.log("失败",err)
			}
		});
	}, 10000);
	getApp().globalData.intTime=intTime
	console.log('存放',getApp().globalData.intTime)
}
//链接websocket
function linkWebsocket(){
    //接口地址
	var host = sys.appUrl;
	uni.connectSocket({
		url: host ,
		success:(res)=>{
			console.log('成功',res)
		},
		fail: (err) => {
			console.log('失败',err)
		},
		complete: (res)=> {
			// openWebSockeMessage()
		}
	});
}

function openWebSockeMessage(){
	//链接websocket
	linkWebsocket()
	//监听是否链接成功
	uni.onSocketOpen(res=>{
		// console.log('链接成功',res)
	});
	//维持心跳
	MaintainHeartbeat()
	//监听心跳
	sendSocke()
	//websocket链接失败
	uni.onSocketError(function (res) {
		openWebSockeMessage()
	});
}


module.exports={
	checkSocketState,
	openWebSockeMessage,
	sendSocke
}

 这样就可以实时接收长链接的消息了!

分享不易,都观看到这里了,还不点赞收藏嘛!

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_44291585/article/details/121923949

智能推荐

React Native 集成native-echarts(图表插件)及代码示例_react-native-charts-程序员宅基地

文章浏览阅读6.3k次,点赞2次,收藏8次。React-Native 集成native-echarts(图表插件)_react-native-charts

mysql时间戳(秒)任意秒分组统计聚合实现_timestamp按秒group-程序员宅基地

文章浏览阅读1.2k次。开发过程中有一个需求,需要任意时间段进行聚合统计,例如 每5秒,每10分钟,每2小时 num值得的聚合_timestamp按秒group

PLC高手秘籍!实例讲解PLC故障排查_plc报警查询功能的作用-程序员宅基地

文章浏览阅读856次。PLC硬件损坏或软件运行出错的概率极低,检查故障时,重点应放在PLC的外围电气元件,PLC的故障大多数是外围接口信号故障,维修时,只要PLC有部分控制的动作正常,就不用怀疑PLC的程序问题。确认运算程序有输出,而PLC的接口没有输出,则为接口电路故障。PLC系统的硬件故障多于软件故障,大多是外部信号不满足或执行元件故障引起,而不是PLC系统的问题。可根据PLC输入、输出状态来判断故障。PLC的..._plc报警查询功能的作用

SQL Server 2019 的下载安装及后续与Java的连接_java 连接 sqlserver2019-程序员宅基地

文章浏览阅读3.1k次,点赞3次,收藏26次。SQL Server 2019 下载安装详解一、下载网址https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads二、安装步骤1.进入官网后的页面如下,在“还可以下载免费的专用版本”中选择下方“Developer版本”,点击下方“立即下载”按钮。2.下载后得到一个应用程序文件,双击并运行。3.在弹出的窗口选择安装类型 基本(B) 。4.选择语言 中文(简体),并点击 接受 。5.选择安装位置,根据个人需要决定,点击安_java 连接 sqlserver2019

一张图理清Vue中的生命周期和钩子函数_vue的执行过程与生命周期函数的关联图形-程序员宅基地

文章浏览阅读477次,点赞2次,收藏2次。前言Vue 框架的入口就是 Vue 实例,其实就是框架中的 view model ,它包含页面中的业务处理逻辑、数据模型等,它的生命周期中有多个事件钩子,让我们在控制整个Vue实例的过程时更容易形成好的逻辑。贴图下面的图片是在官方文档的图片上进行了解释说明,帮大家更好的理解这张图。代码贴上一个小案例辅助理解<!DOCTYPE html><html lang="..._vue的执行过程与生命周期函数的关联图形

写游戏用python还是c好点_为什么多数游戏服务端是用 C++ 来写-程序员宅基地

文章浏览阅读1k次。早年开发游戏必须用C++,这没得说,2000-2004年,java还没有nio,其他动态语言不抗重负,只能C/C++能开发出完整可用的游戏服务端。直到2005年,韩国的游戏很多都还是纯C++写服务端,金山之前也开发过很多纯粹C++的游戏服务端,后来大家都切了。现代选择有很多:java + javascript, c+python, c+lua, scala, go, erlang。我们面向性能的服..._编写游戏学c还是python

随便推点

matlab2019使用仿真,simulink视频教程仿真建模matlab2019高级-程序员宅基地

文章浏览阅读698次。原标题:simulink视频教程仿真建模matlab2019高级simulink视频教程仿真建模matlab2019高级观看地址https://ke.qq.com/course/465006?tuin=b844ecf1、 simulink基础知识1.1 simulink概述1.2 simulink工作原理1.3 simulink组成与环境2、 simulink仿真基础2.1 simulink基本操..._matlab2019如何进行电路仿真

关于阿里短信配置InvalidDayuStatus.Malformed : The specified dayu status is wrongly formed.的问题_invaliduserstatus.malformed 阿里云短信-程序员宅基地

文章浏览阅读1.8k次。关于阿里短信配置InvalidDayuStatus.Malformed : The specified dayu status is wrongly formed.的问题 1.这个问题主要是之前与阿里大于使用的短信接口不同将最新阿里提供的官方sdk导入&lt;dependency&gt; &lt;groupId&gt;com.aliyun&lt;/groupId&gt; &lt;..._invaliduserstatus.malformed 阿里云短信

【2019.05.23】JS逆向——破解裁判文书网参数(vl5x,guid )爬虫 超级详细_爬取中国裁判-程序员宅基地

文章浏览阅读2.6k次,点赞2次,收藏16次。文书网免责声明引言本文仅用于个人学习与技术交流,如果有人用于其它其它用途与我一点点关系都没有~如果有啥地方不恰当地方可以联系我删除,不要举报或者有其他的操作总之好好学习社会主义核心价值观保护共产主义接班人中国裁判文书网http://wenshu.court.gov.cn/一、分析请求参数1.找到请求一点搜索的小技巧,我们很容易就找到了我们需要的请求小技巧:..._爬取中国裁判

OpenGL_opengl中的translatem的参数含义-程序员宅基地

文章浏览阅读250次。glm的旋转,平移、缩放OpenGlglm:rotate(旋转)glm:translate(平移)glm:scale(缩放)参考 总结GLM库中glm::transform(位移), glm:scale(缩放), glm::rotate(旋转)OpenGlglm:rotate(旋转)函数功能,将物体进行旋转,如下://目的:将物体 沿z轴 逆时针 旋转90度,创建其变换矩阵//1、初始..._opengl中的translatem的参数含义

移动APP性能测试指标_移动app 对请求的响应速度、移动端的等待时长 性能指标-程序员宅基地

文章浏览阅读2.1k次。性能测试在应用质量保证中起着重要的作用,概括为三个方面:应用在客户端性能的测试、应用在网络上性能的测试和应用在服务器端性能的测试。通常情况下,三方面有效、合理的结合,可以达到对系统性能全面的分析和瓶颈的预测。 通过性能测试工具得到测试对象的各项性能指标,将各项性能指标与行业中的标准值或者竞品值去做对比,以得到一个综合的结论与优化改进的方案。下面将以手游这样的典型APP为例对客户端性能指标进_移动app 对请求的响应速度、移动端的等待时长 性能指标

设计模式(十)——组合模式(Composite Pattern)_csdn 一个学院school由1到多个系department构成;每个系至少拥有1位指导教师ins-程序员宅基地

文章浏览阅读362次。组合模式(Composite Pattern)基本介绍组合模式(Composite Pattern),又叫部分整体模式,把部分和整体的关系用树形结构来表示,从而使客户端对单个对象和组合对象的访问具有一致性,可以使用统一的方式处理部分对象和整体对象。组合模式依据树形结构来组合对象,用来表示部分以及整体层次。UML原理类图角色及职责分析抽象构件(Component)角色: 定义了叶..._csdn 一个学院school由1到多个系department构成;每个系至少拥有1位指导教师instru