实现发送文字、表情包

一、 发送原理

  • 前端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收到消息后做解析并显示

二、 前端处理核心方法

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

  1. //发送文本消息
  2. sendtxtmsg:function(txt){
  3. //{id:1,userid:2,dstid:3,cmd:10,media:1,content:txt}
  4. var msg =this.createmsgcontext();
  5. //msg={"dstid":dstid,"cmd":cmd,"userid":userId()}
  6. //选择某个好友/群的时候对dstid,cmd进行赋值
  7. //userId()返回用户自己的id ,
  8. // 从/chat/index.shtml?id=xx&token=yy中获得
  9. //1文本类型
  10. msg.media=1;msg.content=txt;
  11. this.showmsg(userInfo(),msg);//显示自己发的文字
  12. this.webSocket.send(JSON.stringify(msg))//发送
  13. }
  15. //发送图片消息
  16. sendpicmsg:function(picurl){
  17.     //{id:1,userid:2,dstid:3,cmd:10,media:4,
  18.     // url:"http://www.baidu.com/a/log,jpg"}
  19.     var msg =this.createmsgcontext();
  20.     msg.media=4;
  21.     msg.url=picurl;
  22.     this.showmsg(userInfo(),msg)
  23.     this.webSocket.send(JSON.stringify(msg))
  24. }
  26. //发送音频消息
  27. sendaudiomsg:function(url,num){
  28.     //{id:1,userid:2,dstid:3,cmd:10,media:3,url:"http://www.a,com/dsturl.mp3",anount:40}
  29.     var msg =this.createmsgcontext();
  30.     msg.media=3;
  31.     msg.url=url;
  32.     msg.amount = num;
  33.     this.showmsg(userInfo(),msg)
  34.     console.log("sendaudiomsg",this.msglist);
  35.     this.webSocket.send(JSON.stringify(msg))
  36. }

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

  1. func dispatch(data[]byte){
  2.     //todo 解析data为message
  4.     //todo根据message的cmd属性做相应的处理
  6. }
  7. func recvproc(node *Node) {
  8.     for{
  9.         _,data,err := node.Conn.ReadMessage()
  10.         if err!=nil{
  11.             log.Println(err.Error())
  12.             return
  13.         }
  14.         //todo 对data进一步处理
  15.         dispatch(data)
  16.         fmt.Printf("recv<=%s",data)
  17.     }
  18. }

dispatch函数实现

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

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

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

  1. //初始化websocket的时候进行回调配置
  2. this.webSocket.onmessage = function(evt){
  3.     //前端message以后的处理逻辑
  4.      //{"data":"}",...}
  5.      if(evt.data.indexOf("}")>-1){
  6.          this.onmessage(JSON.parse(evt.data));
  7.      }else{
  8.          console.log("recv<=="+evt.data)
  9.      }
  10.  }.bind(this)
  11. onmessage:function(data){
  12.      this.loaduserinfo(data.userid,function(user){
  13.          this.showmsg(user,data) //显示发送的消息
  14.      }.bind(this))
  15.  }
  17.  //消息显示函数
  18. showmsg:function(user,msg){
  19.     var data={}
  20.     data.ismine = userId()==msg.userid;
  21.     //console.log(data.ismine,userId(),msg.userid)
  22.     data.user = user;
  23.     data.msg = msg;
  24.     //vue 只需要修改数据结构即可完成页面渲染
  25.     this.msglist = this.msglist.concat(data)
  26.     //面板重置
  27.     this.reset();
  28.     var that =this;
  29.     //滚动到新消息处
  30.     that.timer = setTimeout(function(){
  31.         window.scrollTo(0, document.getElementById("convo").offsetHeight);
  32.         clearTimeout(that.timer)
  33.     },100)
  34.  }

五、表情包简单逻辑

弹出一个窗口, 选择图片获得一个连接地址 调用 sendpicmsg方法开始发送流程

六、发送图片流程

弹出一个窗口, 选择图片,上传到服务器 获得一个连接地址 调用 sendpicmsg方法开始发送流程

七、 发送语音

弹出一个窗口, 选择按钮,进行录音操作,获得录音文件 上传到服务器, 获得一个连接地址 调用 sendaudiomsg方法 开始发送流程

八、 发送视频

弹出一个窗口, 选择按钮,选择视频 上传到服务器, 获得一个连接地址 调用 sendaudiomsg方法 开始发送流程

测试

一定要更新我的最新git的view代码，然后重新登录哈https://gitee.com/kezuo/go-im/tree/v1.5

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

到此发送文字和图片消息就实现了