Uniapp之WebSocket使用攻略
websocket是什么?是一種網路傳輸協定,可在單個TCP連接上進行全雙工通訊,位於OSI模型的應用層。WebSocket協定在2011年由IETF標準化為RFC 6455,後由RFC 7936補充規範。Web IDL中的WebSocket API由W3C標準化。WebSocket使得客戶端和伺服器之間的資料交換變得更加簡單,允許伺服器端主動向客戶端推播資料。在WebSocket API中,瀏覽
·
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
}
这样就可以实时接收长链接的消息了!
分享不易,都观看到这里了,还不点赞收藏嘛!
更多推荐
已为社区贡献17条内容
所有评论(0)