标签:交互 相关信息 script options nop param mon line struct
1. 在vuex中新增login、initlogin方法
login方法作用是将token和user信息存入缓存
initLogin方法的作用是初始化聊天对象
import $U from ‘@/common/free-lib/util.js‘ import $H from ‘@/common/free-lib/request.js‘
import Chat from ‘@/common/free-lib/chat.js‘ export default { state: { user: {}, chat: null }, actions: { // 登陆后的处理 login({ state, dispatch }, user) { // 存到state中 state.user = user; // 存储到本地存储中 $U.setStorage(‘token‘, user.token) $U.setStorage(‘user‘, JSON.stringify(user)) $U.setStorage(‘user_id‘, JSON.stringify(user.id))
// 连接websocket
state.chat = new Chat({
url: ‘ws://127.0.0.1:7001/ws‘
})
},
// 初始化登录状态
initLogin( {state, dispatch }) {
// 拿到存储数据
let user = $U.getStorage(‘user‘)
if (user) {
// 初始化登录状态
state.user = JSON.parse(user)
// 连接websocket
state.chat = new Chat({
url: ‘ws://127.0.0.1:7001/ws‘
})
console.log(state.chat+ ‘=============‘)
console.log(‘====================‘)
}
}
}
}
2. 新建聊天Chat类
import $U from ‘./util.js‘
import $H from ‘./request.js‘
import $C from ‘./config.js‘
class Chat {
constructor(arg) {
// 初始化url、是否在线
this.url = arg.url
this.isOnline = false
this.socket = null
// 获取当前用户相关信息
const user = $U.getStorage(‘user‘)
this.user = user ? JSON.parse(user) : {}
// 初始化聊天
// To表示当前聊天对象的对方
this.To = false
// 连接和监听
if (this.user.token) {
this.connectSocket()
}
}
// 连接socket
connectSocket() {
// 连接websocket( 注意:需要添加token信息)
this.socket = uni.connectSocket({
url: this.url + ‘?token=‘+this.user.token,
complete: () => {}
})
// 监听连接成功
this.socket.onOpen(() => this.onOpen())
// 监听断开
this.socket.onClose(() => this.onClose())
// 监听接收信息
this.socket.onMessage(res => this.onMessage(res))
// 监听错误
this.socket.onError(() => this.onError())
}
onOpen() {
// 用户上线
this.isOnline = true
console.log(‘socket连接成功‘)
// 获取用户离线消息
}
onClose() {
// 用户下线
this.isOnline = false
this.websocket = null
console.log(‘socket关闭‘)
}
onError() {
// 用户下线
this.isOnline = false
this.socket = null
console.log(‘socket连接错误‘)
}
// 监听接收消息
onMessage(res) {
console.log(res)
}
// 创建聊天对象
createChatObject(detail) {
this.To = detail
console.log(‘创建聊天对象‘, this.To)
}
// 销毁聊天对象
destoryChatObject() {
this.To = null
console.log(‘销毁聊天对象‘, this.To)
}
// 组织发送信息格式
formatSendData(params) {
return {
id: 0,// 唯一id, 用于撤回
from_avatar: this.user.avatar,// 发送者头像
from_name: this.user.name,// 发送者昵称
from_id: this.user.id,// 发送者id
to_id: this.To.user_id,// 接收人人/群 id
to_name: this.To.nickname,// 接收人/群 名称
to_avatar: this.To.avatar,// 接收人/群 头像
chat_type: ‘user‘ ,//接收;类型
type: params.type,// 消息类型
data: params.data,
potions: params.options ? params.options : {},
create_time: (new Date()).getTime(),
isremove: 0,
sendStatus: ‘pending‘// 发送状态
}
}
}
export default Chat
3. 在登录页面Login.vue中,当点击按钮触发submit事件时,发送登录post请求,将token和user信息添加到缓存, 且连接websocket
submit() {
$H.post(‘/‘+this.type, this.form, {
token: false,
}).then(res => {
if (this.type === ‘login‘) {
this.$store.dispatch(‘login‘, res)
uni.showToast({
title: ‘登录成功‘,
icon: ‘none‘
});
// 跳转到tabbar页面需要用switTab
return uni.switchTab({
url:"/pages/tabbar/index/index"
})
}
// 注册
this.changeType()
uni.showToast({
title: ‘注册成功‘,
mask: false,
duration: 1500
});
})
}
标签:交互 相关信息 script options nop param mon line struct
原文地址:https://www.cnblogs.com/zhanghaoblog/p/12636540.html