22、实现发送文字、表情包

最新推荐文章于 2024-02-21 15:03:39 发布

付大大丶

最新推荐文章于 2024-02-21 15:03:39 发布

阅读量440

点赞数

分类专栏： Go语言打造高并发web即时聊天(IM)应用文章标签： go语言

本文链接：https://blog.csdn.net/fyx708711/article/details/131863423

版权

Go语言打造高并发web即时聊天(IM)应用专栏收录该内容

18 篇文章 1 订阅

订阅专栏

实现发送文字、表情包

实现发送文字、表情包

一、发送原理前端user1拼接好数据对象

Message msg={id:1,userid:2,dstid:3,cmd:10,media:1,content:txt} 转化成json字符串

jsonstr jsonstr = JSON.stringify(msg)

通过websocket.send(jsonstr)发送后端S在recvproc中接收收数据data 并做相应的逻辑处理dispatch(data)-转发给user2 user2通过websocket.onmessage收到消息后做解析并显示

二、前端处理核心方法

前端所有的操作都在拼接数据如何拼接?

//发送文本消息
sendtxtmsg:function(txt){
//{id:1,userid:2,dstid:3,cmd:10,media:1,content:txt}
var msg =this.createmsgcontext();
//msg={"dstid":dstid,"cmd":cmd,"userid":userId()}
//选择某个好友/群的时候对dstid,cmd进行赋值
//userId()返回用户自己的id ,
// 从/chat/index.shtml?id=xx&token=yy中获得
//1文本类型
msg.media=1;msg.content=txt;
this.showmsg(userInfo(),msg);//显示自己发的文字
this.webSocket.send(JSON.stringify(msg))//发送
}
//发送图片消息
sendpicmsg:function(picurl){
    //{id:1,userid:2,dstid:3,cmd:10,media:4,
    // url:"http://www.baidu.com/a/log,jpg"}
    var msg =this.createmsgcontext();
    msg.media=4;
    msg.url=picurl;
    this.showmsg(userInfo(),msg)
    this.webSocket.send(JSON.stringify(msg))
}
//发送音频消息
sendaudiomsg:function(url,num){
    //{id:1,userid:2,dstid:3,cmd:10,media:3,url:"http://www.a,com/dsturl.mp3",anount:40}
    var msg =this.createmsgcontext();
    msg.media=3;
    msg.url=url;
    msg.amount = num;
    this.showmsg(userInfo(),msg)
    console.log("sendaudiomsg",this.msglist);
    this.webSocket.send(JSON.stringify(msg))
}

三、后端逻辑处理函数 func dispatch(data[]byte)

func dispatch(data[]byte){
    //todo 解析data为message
    //todo根据message的cmd属性做相应的处理
}
func recvproc(node *Node) {
    for{
        _,data,err := node.Conn.ReadMessage()
        if err!=nil{
            log.Println(err.Error())
            return
        }
        //todo 对data进一步处理
        dispatch(data)
        fmt.Printf("recv<=%s",data)
    }
}

dispatch函数实现

22、实现发送文字、表情包 - 图1

const (
    CMD_SINGLE_MSG = 10
    CMD_ROOM_MSG   = 11
    CMD_HEART      = 0
)
type Message struct {
    Id      int64  `json:"id,omitempty" form:"id"`           //消息ID
    Userid  int64  `json:"userid,omitempty" form:"userid"`   //谁发的
    Cmd     int    `json:"cmd,omitempty" form:"cmd"`         //群聊还是私聊
    Dstid   int64  `json:"dstid,omitempty" form:"dstid"`     //对端用户ID/群ID
    Media   int    `json:"media,omitempty" form:"media"`     //消息按照什么样式展示
    Content string `json:"content,omitempty" form:"content"` //消息的内容
    Pic     string `json:"pic,omitempty" form:"pic"`         //预览图片
    Url     string `json:"url,omitempty" form:"url"`         //服务的URL
    Memo    string `json:"memo,omitempty" form:"memo"`       //简单描述
    Amount  int    `json:"amount,omitempty" form:"amount"`   //其他和数字相关的
}
// 后端调度逻辑处理
func dispatch(data []byte) {
    //todo 解析data为message
    msg := Message{} //空对象，Message在上方定义了结构体
    err := json.Unmarshal(data, &msg)
    if err != nil {
        log.Println(err.Error())
        return
    }
    //todo 根据cmd对逻辑进行处理
    switch msg.Cmd {
    case CMD_SINGLE_MSG: //判断定义的常量值是否是单聊，群聊，实现相对应的业务逻辑
        sendMsg(msg.Dstid, data)
    case CMD_ROOM_MSG:
        //todo 群聊转发逻辑
    case CMD_HEART: //心跳事件，保证网络的持久性，如果接到数据说明数据是正常的
        //todo 一般啥都不做
    }
}

四、对端接收到消息后处理函数

//初始化websocket的时候进行回调配置
this.webSocket.onmessage = function(evt){
    //前端message以后的处理逻辑
     //{"data":"}",...}
     if(evt.data.indexOf("}")>-1){
         this.onmessage(JSON.parse(evt.data));
     }else{
         console.log("recv<=="+evt.data)
     }
 }.bind(this)
onmessage:function(data){
     this.loaduserinfo(data.userid,function(user){
         this.showmsg(user,data) //显示发送的消息
     }.bind(this))
 }
 //消息显示函数
showmsg:function(user,msg){
    var data={}
    data.ismine = userId()==msg.userid;
    //console.log(data.ismine,userId(),msg.userid)
    data.user = user;
    data.msg = msg;
    //vue 只需要修改数据结构即可完成页面渲染
    this.msglist = this.msglist.concat(data)
    //面板重置
    this.reset();
    var that =this;
    //滚动到新消息处
    that.timer = setTimeout(function(){
        window.scrollTo(0, document.getElementById("convo").offsetHeight);
        clearTimeout(that.timer)
    },100)
 }