开发一个在线聊天

在线聊天技术选型

在线聊天因为涉及到互相通信，所以采用socket.io

前端框架 vue2

打包工具 vite

在线gitee地址： https://gitee.com/service-chat/service-chat

整体架构

初始化之后的效果如下：

init 初始化

init 主要是从url参数中获取用户的id，然后调用signalrService

    // 初始化
    init() {
   
      this.sender.id = parseInt(this.$route.query.sendId);
      if (!(this.sender.id > 0)) {
   
        alert("请添加sendId参数");
        return false;
      }
      // 当前产品
      let product = this.$store.state.productList.filter(
        (x) => x.Id === this.$route.query.productId
      );
      if (product.length > 0) {
   
        // 卡片信息内容
        this.browseCard.Id = product[0].Id;
        this.browseCard.Name = product[0].Name;
        this.browseCard.ShortDescription = product[0].ShortDescription;
        this.browseCard.DefaultPictureUrl = product[0].DefaultPictureUrl;
        this.browseCard.Amount = "编码:" + product[0].ProductCode;
        this.browseCard.Type = 1;
      }
      // 当前用户
      let userInfo = this.$store.state.userList.filter(
        (x) => x.id == this.sender.id
      )[0];
      // 快速回复
      this.fastReplay = this.$store.state.fastReply;
      if (userInfo) {
   
        this.sender.name = userInfo.name;
        // 修改昵称时的临时记录昵称
        this.temporaryUserName = userInfo.name;
        this.sender.isService = userInfo.isService;
        this.sender.receptNum = userInfo.receptNum;
        // 修改接待用户数量时的临时记录接待用户数量
        this.temporaryReceptNumber = userInfo.receptNum;
      } else {
   
        alert("请保证sendId参数在userList.json文件中存在");
        return false;
      }
      // 发送欢迎语
      let welCome = this.$store.state.robotReply.filter(
        (x) => x.Answer.indexOf("欢迎语") !== -1
      );
      if (welCome.length > 0) {
   
        this.signalrService(welCome[0], 1, 4, false);
      }
    },

signalrService

当初次初始化的时候，只是把当前的内容发送到当前会话内容里边去。

// 1.信息组装
// 发送者身份：0 机器人，1 客服员，2.会员
// 信息类型 ：0 文本，1 图片，2 表情，3 商品卡片/订单卡片，4 机器人回复
    signalrService(
      content,
      identity,
      type,
      isSendOther = true,
      isRobot = false
    ) {
   
      // 发送信息
      if (this.sendState) {
   
        let createDate = this.nowTime();
        let noCode = +new Date();
        this.infoTemplate = {
   
          SendId: this.sender.id,
          ReviceId: isRobot ? 0 : this.revicer.id,
          Content: content,
          Identity: identity,
          Type: type,
          State: isRobot || !this.sender.onlineState ? 1 : 0,
          // 发送时间戳
          NoCode: noCode,
          OutTradeNo: this.revicer.outTradeNo,
          CreateDateUtc: createDate,
          Title: null,
          Description: null,
          Label: null,
          Thumbnail: null,
          NoSend: true,
        };
        // 发送到当前会员内容里边中
        this.toSendInfo(this.infoTemplate);
        if (isSendOther) {
   
          this.sendMsg(this.infoTemplate);
        }
        this.sendState = isRobot || !this.sender.onlineState ? true : false;
        this.sendInfo = type === 2 ? this.sendInfo : "";
        this.toBottom(100);
      }