vue.js客服系统实时聊天项目开发（八）使用axios post请求访客初始化接口

唯一Chat

发布于 2023-02-17 11:44:11

8430

发布于 2023-02-17 11:44:11

文章被收录于专栏：陶士涵的菜地陶士涵的菜地

访客的初始化，很多人可能会认为放到链接websocket的时候，通过ws去发送给服务端

但是这样会有一定的问题，因为如果网络不稳定或者ws链接断了，会进行不停的重连，这样会造次多次请求初始化流程

所以我会在链接websocket之前，调用一个HTTP的访客初始化接口，这样也方便进行限流，各种账户异常问题判断等逻辑

在main.js中通过原型把axios 传递进来

import axios from 'axios'

Vue.prototype.$axios= axios

在业务逻辑里面进行调用

<script>

    export default {
      name: 'ChatApp',
        data() {
          return {
              visitor:{
                  to_id:"",
                  visitor_id:"",
              },

          }
        },
        methods: {
            visitorLogin(){
                let entId=tools.getQuery("ent_id");
                let toId=tools.getQuery("to_id");
                var _this=this;
                this.$axios.post(this.ApiHost+'/visitor_login', {
                    ent_id:entId,
                    to_id:toId,
                }).then(function (response) {
                    var code=response.data.code;
                    var msg=response.data.msg;
                    if(code!=200){
                        _this.$message({
                          message: msg,
                          type: 'error'
                        });
                        return ;
                    }
                    let result=response.data.result;
                    _this.visitor.to_id=result.to_id;
                    _this.visitor.visitor_id=result.visitor_id;

                }).catch(function (error) {
                    _this.$message({
                      message: error.message,
                      type: 'error'
                    });
                });
            },

        },
        mounted: function () {
            this.visitorLogin();
        }
    }
</script>

这样就完成了发送post请求到访客初始化接口，会生成一个访客ID，前端需要把这个访客ID进行保存一下

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2023-01-20，如有侵权请联系 cloudcommunity@tencent.com 删除

http