一、在app.vue中编写
1.在<script></script>标签中编写公共的创建链接封装
<script>
//socket连接标识 false未连接，true 连接
let socket_flag=false;
var SocketTask = uni.connectSocket({
header:{
'Authorization':'Bearer eyJhbGciOiJIUzUxMiJ9.eyJzdWIiOiIxODI4NTEyMjQyNiIsImNyZWF0ZWQiOjE1ODY1NzMzNjE5ODksImV4cCI6MTU4NzE3ODE2MX0.15CjVJh5Adz1pXTdGkDDiT6HzOwtnOj-y4l6sDVD2eBNO4zFMkPw1ixhfyB8fOx62AF6FTv2z1maNO2i6-FS-g',
'content-type': 'application/json'},
url:'ws://10.0.106.21:8201/mall-portal/socket/9',
fail:function(res){
console.log("连接服务器websocket_失败",res);
},
success:function(res){
console.log("连接服务器websocket_成功",res);
socket_flag = true;
},
complete:function(res){
console.log("连接服务器websocket_完成",res);
}
});
</script>
2.还是在app.vue中 export default下将第一步封装连接通信导出为全局方法使用
export default {
globalData: {
// 导出为全局方法使用
SocketTask: SocketTask
},
methods: {
}
}
3.还是在app.vue中 methods下 编写“SocketTask 通信接受消息” 等方法
methods: {
...mapMutations(['login']),
onmessage_fun:function(){
console.log("onmessage_fun_______");
SocketTask.onMessage(function(data){
console.log("SocketTask 通信接受消息______",data);
uni.$emit('app_test',data);
})
},
//中转事件
app_test:function(data){
console.log("监听到了，接受消息的事件回调::ffffffffff::::::")
},
openSocketFun:function(){
SocketTask = uni.connectSocket({
header:{
'Authorization':'Bearer eyJhbGciOiJIUzUxMiJ9.eyJzdWIiOiIxODI4NTEyMjQyNiIsImNyZWF0ZWQiOjE1ODY1NzMzNjE5ODksImV4cCI6MTU4NzE3ODE2MX0.15CjVJh5Adz1pXTdGkDDiT6HzOwtnOj-y4l6sDVD2eBNO4zFMkPw1ixhfyB8fOx62AF6FTv2z1maNO2i6-FS-g',
'content-type': 'application/json'},
url:'ws://10.0.106.21:8201/mall-portal/socket/9',
fail:function(res){
console.log("连接服务器websocket_失败",res);
},
success:function(res){
console.log("连接服务器websocket_成功",res);
},
complete:function(res){
console.log("连接服务器websocket_完成",res);
}
});
getApp().globalData.SocketTask = SocketTask;
}
},
需要注意的：methods中app_test这个中转事件不写不行，不写就会报错，不执行创建连接通信方法，因为在接受通信信息时候需要$emit触发这个“中间事件”来传递 “信息”；创建连接方法也需要在methods中写一遍
4.还是在app.vue中 onshow下 调用methods中的方法等 监听信息，
onShow: function() {
console.log('App Show')
// 判断socket连接标识 false未连接，true 连接
if(!socket_flag){
// 调用methods中方法打开创建连接
this.openSocketFun();
}
// 调用全局的创建连接方法 执行.onOpen打开连接
SocketTask.onOpen((res)=>{
console.log("socketTask 打开连接: ",res);
socket_flag = true;// 修改连接标识 为true
this_.onmessage_fun(); // 调用接收通信信息的方法 接收信息
});
},
5.还是app.vue中的onHide下，在页面离开时
onHide: function() {
console.log('App Hide')
// 关闭连接
SocketTask.close({
code:1000,
success:function(){
console.log("SocketTask close success ");
},
fail:function(res){
console.log("SocketTask close fail ",res);
}
});
// 关闭连接并且修改标识
SocketTask.onClose(function(){
console.log("SocketTask onClose success ");
socket_flag = false;
})
},
二、在需要通信的页面编写
1.在<script></script>标签中编写app.vue中方法的使用，调用
<script>
let app= getApp();
</script>
2.在onLoad页面加载中，监听app.vue中的全局事件
onLoad(option) {
uni.$on('app_test',( data)=> {
// 监听app.vue中的全局事件
// 接受到后台发来的对话信息 data
var nowDate = new Date();
let newData = JSON.parse(data.data) // 一条数据
let userId = newData.user // id 对方的
let type = newData.type
console.log("收到消息_______",data)
// 收到信息后进行信息数据类型判断 后再显示
})
},
// 页面离开后移除监听
onUnload() {
// 移除监听事件
uni.$off('onmessage_fun');
},
3.在页面methods中编写发送信息的方法
// 发送消息
sendMsg(content,type){
// content为要发送的内容 type为要发送的内容类型 文字还是图片等
var nowDate = new Date();
// 自己发出的消息
let myId = this.myuid // 自己的id
let uid = this.other_partyId // 发给谁的id
// let uid = '8' // 发给谁的id
let msg = {
id:9,toUserName:"大黑哥",face:"/static/img/face.jpg",time:nowDate.getHours()+":"+nowDate.getMinutes(),type:type,msg:content};
this.screenMsg(msg); // 这是一个自己写的判断信息类型的方法
let data = {
user: uid, // 发给谁的id
type: type,
data: content
}
let dataStr = JSON.stringify(data)
// console.log(app.globalData.SocketTask)
app.globalData.SocketTask.send({
// 发送消息
data:dataStr,
success:function(res){
console.log("SocketTask 发送消息成功", res);
},
fail:function(res){
console.log("SocketTask 发送消息失败",res);
},
complete() {
// 成功或失败都执行
console.log("SocketTask 发送消息完成");
}
})
},
到这儿差不多完成了 但是细节太多 还有bug 需要解决 先做个记录