今天研究一下在uniapp中websocket的使用方法：
基本使用：
uni.closeSocket();
关闭现有的websocket服务
uni.connectSocket({
url:“”
});
创建一个新的websocket连接,其中的url是必须传的参数。
uni.onSocketOpen(function (res) {
})
连接成功后的回调函数
uni.onSocketMessage(function (res) {
console.log(‘收到服务器内容：’ + res.data);
})
监听WebSocket接受到服务器的消息事件。
以上为基本用法。文章来源：https://www.toymoban.com/news/detail-532532.html
在项目中的实际应用:文章来源地址https://www.toymoban.com/news/detail-532532.html
onShow(){
//首页显示
uni.getStorage({
key: 'UserListYH',
//获取本地存储中的用户信息
success: (res)=>{
//获取成功的回调函数
this.isLogin = true
//登陆状态标记为true
uni.request({
//根据得到的用户id发送ajax请求，获取用户的消息
url: this.$api+'/IM/isHaveMessage/' + res.data.id,
success: (resquert) => {
//请求成功的回调函数
console.log(resquert,'resquert')
if(resquert.data.data){
this.showxxList = true
this.$store.state.dataList = true
}else{
this.showxxList = false
}
}
});
//到这里为止还没有用到websocket
if(!this.socketOpen){
//判断是否打开了socket服务
this.uniOpenSocket(res.data.id);
//如果没有打开服务，就调用开启socket的函数，把用户的id作为参数传进去
}
},
fail:(e)=>{
//如果存储中获取不到用户信息，登陆状态变成未登录
this.isLogin = false;
}
});
}
uniOpenSocket(id){
uni.closeSocket();
//关闭现在的socket
let _this = this;
uni.connectSocket({
url:"ws://uep5ems.nat.ipyingshe.com/imServer/"+id
//可以判断这个url地址是后端地址，ws:是websocket协议，而且可以发现用户id多次出现
});
uni.onSocketOpen(function (res) {
//连接成功后的回调
_this.socketOpen = true
//socket标记为开启状态
_this.onSocketMessage();
// 调用了名为onSocketMessage的函数
uni.getStorage({
key: 'userMsgList',
success: function (res) {
console.log('初始化聊天列表成功！');
console.log(res);
if(res.data.length == 0){
_this.chatList=[{
userId:5,
userName:"在线客服",
imageUrl:"/static/img/im/face/face_2.jpg",
time:"",
nowMsg:"欢迎提问,很高兴为您服务！",
numberOfMsg:0,
}]
}else{
console.log(res.data,'*********');
_this.chatList = res.data
}
},
fail() {
_this.chatList=[{
userId:5,
userName:"在线客服",
imageUrl:"/static/img/im/face/face_2.jpg",
time:"",
nowMsg:"欢迎提问,很高兴为您服务！",
numberOfMsg:0,
}]
}
});
});
//socket连接成功后，调用的回调函数
onSocketMessage(){
let _this = this;
let timer = setInterval(()=>{
//开启一个定时器
uni.onSocketMessage((msg)=>{
//接收到服务器的消息
clearInterval(timer)
//清空定时器
if(!msg.data){
//如果没有消息直接退出当前执行函数
return
}
const msgUser = JSON.parse(msg.data);
//如果有消息，把消息字符串解析成json对象
console.log(msgUser)
let haschatList = false;
uni.getStorage({
key: 'userMsgList',
//从本地存储中获取用户的消息列表
success: function (res) {
//获取成功的回调
_this.chatList = res.data
//获取的消息列表存入data
console.log(_this.chatList,'chatList----------');
},
fail: () => {
console.log('getstorage失败了');
}
});
_this.chatList.forEach((item,index) => {
// 判断函数----判断当前用户是否在列表
if(item.userId == msgUser.fromUserId){
haschatList = true;
_this.chatList[index].time = msgUser.sendTime
_this.chatList[index].numberOfMsg++
_this.chatList[index].nowMsg = msgUser.contentText
_this.chatList[index].UserAndMeMsgList.push({
userMsgID: msgUser.fromUserId,
time: msgUser.sendTime,
msg: msgUser.contentText
})
uni.setStorage({
key: 'userMsgList',
data: _this.chatList,
success: function () {
uni.$emit('haveNewMsg',
{
userMsgID: msgUser.fromUserId,
time: msgUser.sendTime,
msg: msgUser.contentText
})
}
});
}
})
if(haschatList && _this.chatList.length != 1){
return
}
uni.request({
url: _this.$api + '/userInfo/getUserInfo?userId='+msgUser.fromUserId,
method:'POST',
success: (res) => {
console.log(res.data.data)
let msgLsit = {
userId: msgUser.fromUserId,
imageUrl: res.data.data.avatar,
userName: res.data.data.name,
time: msgUser.sendTime,
nowMsg: msgUser.contentText,
numberOfMsg: 1,
UserAndMeMsgList:[]
}
msgLsit.UserAndMeMsgList.push({
userMsgID: msgUser.fromUserId,
time: msgUser.sendTime,
msg: msgUser.contentText
})
_this.chatList.unshift(msgLsit)
uni.setStorage({
key: 'userMsgList',
data: _this.chatList,
success: function () {
uni.$emit('haveNewMsg')
}
});
},
});
})
},60)
到了这里，关于uniapp中websocket的使用方法的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
