[网络协议]Uniapp之WebSocket使用攻略

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
}

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

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