标签:交互 相关信息 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