• 前后端交互3 发送消息1


    1 当我们点击好友时,即可进入与好友的聊天界面,并将当前好友信息传递到聊天界面。在当前会话页面中,可获取上个页面传过来的好友信息。

     通过JSON.parse()将传递过来的字符串转换成对象

     之后,在页面刚加载时,就创建聊天对象,other的值为从上个页面传递过来的值

     

    onLoad(e) {
    
    		this.other = JSON.parse(e.data);
    		// 创建聊天对象
             // this.chat为vuex中state中的chat对象 this.chat.createChatObject(this.other) },

     

    2.    当点击发送按钮,触发send事件

      send事件中,首先需要组织发送数据的格式(调用Chat类中的formatSendData方法)

      之后将数据渲染到页面

      最后,调用Chat类的send方法发送消息

    		send(type, data='', options = {}) {
    			// 组织数据格式
    			let message = this.chat.formatSendData({
    				type: 'text',
    				data: this.text,
    				options,
    			})
    			
    			
    			// 渲染到页面
    			// 拿到数组的长度
    			let index = this.chatList.length
    			this.chatList.push(message)
    		
    			this.chat.send(message)
    			.then(res => {
    				console.log(res)
    				
    				// 发送成功
    				this.chatList[index].id = res.id
    				this.chatList[index].sendStatus = 'success'
    			}).catch(err => {
    				console.log(err)
    				// 发送失败
    				this.chatList[index].sendStatus = 'fail'
    			})
    		}
    

    3. Chat.js

  • 相关阅读:
    mabatis配置文件yml配置打印sql
    java使用validator检验bean
    vue项目 老是报错 气的我就不行
    注入为空
    软件测试基础
    单元测试实战
    软件测试基础
    For循环案例---九九乘法表
    软件测试基础
    软件测试基础
  • 原文地址:https://www.cnblogs.com/zhanghaoblog/p/12637443.html
Copyright © 2020-2023  润新知