video_ca/src/views/Chat.vue

<template>
    <el-container class="layout-container-demo" style="height: 700px;width: 1000px;">
        <el-aside width="200px">
          <el-input  
            placeholder="请输入用户姓名"  
            v-model="searchName"  
            @input="filterUsers"  
          ></el-input>  
            <el-scrollbar>
                <el-menu :default-openeds="['1', '3']">
                    <el-sub-menu index="1">
                        <template #title>
                            <el-icon>
                                <message />
                            </el-icon>联系人
                        </template>
                        <el-scrollbar height="300px">
                            <el-menu-item-group v-for="user in filteredUsers" :key="user.id">
                            <el-menu-item :index="String(user.id)" @click="handleGetMessage(user.id)" style="height: 40px;">
                                {{ user.name }}
                                <span v-if="hasUnreadMsg[user.id]" class="unread-dot"></span>
                            </el-menu-item>
                        </el-menu-item-group>
                        </el-scrollbar>
                    </el-sub-menu>
                    <el-sub-menu index="2">
                        <template #title>
                            <el-icon><icon-menu /></el-icon>
                            群组
                        </template>
                        <el-scrollbar height="200px">
                            <el-menu-item-group v-for="item in groupList" :key="item.ID">
                                <!-- <template #title>Group 1</template> -->
                                <el-menu-item :index="String(item.GroupName)" @click="handleGetGroupMessage(item.ID)">{{ item.GroupName
                                }}</el-menu-item>
                                <!-- <el-menu-item index="2-2">Option 2</el-menu-item> -->
                            </el-menu-item-group>
                        </el-scrollbar>
                        
                    </el-sub-menu>
                </el-menu>
            </el-scrollbar>
        </el-aside>

        <el-container width="800px">
            <el-header style="text-align: right; font-size: 12px">
                <div class="toolbar">
                  <el-button
                        type="primary"
                        size="mini"
                        @click.prevent="getHistory()"
                        >历史消息</el-button
                        >
                    <el-button
                        type="primary"
                        size="mini"
                        @click.prevent="handleMenuSelect('/videoList')"
                        >返回</el-button
                        >
                    <el-text class="mx-1" type="primary" >目前:{{ cur_user_name }}</el-text>

                    <div>
                        <span style=" margin-right: 10px;margin-left: 10px;">{{ username }}</span>
                        <el-avatar size="default" fit="fit"> {{ username }} </el-avatar>
                    </div>
                </div>
            </el-header>

            <el-main style="margin-top: 1px;">
                <el-scrollbar class="chat-room" id="chat-room" ref="chatRoom" height="600px" style="margin-top: 1px" always>
                    <div v-for="item in MsgList" :key="item.ID"
                        style="margin-top: 10px;margin-bottom: 20px;">
                        <!-- 左边 -->
                        <div v-if="uid == item.ToUserID && item.FromUserID == cur_user_id && cur_group_id==0" style="margin-left: 10px;margin-bottom: 8px;">
                            <el-row class="row-bg" type="flex" align="middle">
                                <el-avatar size="default" fit="fit">{{ cur_user_name }}</el-avatar>
                                <span style="margin-left: 10px">{{ formatTime(item.CreatedAt) }}</span>
                            </el-row>

                            <el-row>
                                <el-col :span="1000" :offset="1" class="msg" >
                                    {{ item.Msg }}
                                </el-col>
                            </el-row>
                        </div>
                        <div v-if="cur_group_id !=0 && uid != item.FromUserID" style="margin-left: 10px;margin-bottom: 8px;">
                            <el-row class="row-bg" type="flex" align="middle">
                                <el-avatar size="default" fit="fit">{{ item.name}}</el-avatar>
                                <span style="margin-left: 10px">{{ formatTime(item.CreatedAt) }}</span>
                            </el-row>

                            <el-row>
                                <el-col :span="1000" :offset="1" class="msg" >
                                    {{ item.Msg }}
                                </el-col>
                            </el-row>
                        </div>
                        <!-- 右边 -->
                        <div v-if="uid == item.FromUserID && item.ToUserID == cur_user_id" style="margin-right: 10px;margin-bottom: 8px;">
                            <el-row class="row-bg" type="flex" justify="end" align="middle">
                                <span style="margin-right: 10px">{{ formatTime(item.CreatedAt)}}</span>
                                <el-avatar size="default" fit="fit"> {{ tokenData.username }} </el-avatar>
                            </el-row>

                            <el-row justify="end">
                                <el-col :span="1000" class="msg2" style="margin-right: 20px;">
                                    {{ item.Msg }}
                                </el-col>
                            </el-row>
                        </div>
                    </div>
                </el-scrollbar>
            </el-main>
            <el-row class="row-bg" type="flex" justify="space-around" align="middle">
                <el-col :span="20">
                    <el-input type="text" style="width: 100%" autofocus @keyup.enter="handleSendBtnClick"
                        placeholder="请输入消息按Enter发送" v-model="currentMsg"></el-input>
                </el-col>
                <el-col :span="2">
                    <el-button class="sendBtn" @click="handleSendBtnClick" type="primary" size="default">
                        发送
                    </el-button>
                </el-col>
            </el-row>
        </el-container> 
    </el-container>
</template>

<script>
import axios from "axios";
import { inject } from "vue";
import { getFriendListService } from "@/api/chat.js";
import { getMessageService} from "@/api/chat.js";
import {sendMessageService} from "@/api/chat.js";
import { ElAvatar, ElDropdown, ElDropdownItem, ElDropdownMenu, ElIcon, ElMenu, ElMenuItem, ElMenuItemGroup, ElScrollbar, ElRow, ElCol, ElButton } from 'element-plus'
import { Menu as IconMenu, Message, Setting } from '@element-plus/icons-vue'
import router from "@/router/index.js";
import {ElMessage} from "element-plus";

export default {
  data() {
    return {
      ip: "",
      tableData: [],
      tokenData: {
        token: localStorage.getItem("token"),
        ip: localStorage.getItem("ip"),
        userId: localStorage.getItem("userId"),
        username: localStorage.getItem("username"),
      },
      username: localStorage.getItem("username"),
      userList: [],
      filteredUsers: [], // 过滤后的用户列表 
      to_user_id:0,
      cur_user_id:0,
      cur_group_id:0,
      msg_type:1,
      searchName: '', // 搜索框内容
      history_cnt: 1,

      cur_user_name: "",
      eventSource: null,  // 事件源
      uid: localStorage.getItem("userId"),
      currentMsg:"",
      MsgList: [],
      groupList: [],
      hasUnreadMsg: {}, // 未读消息, key为用户id，value为true/false
    };
  },

  // methods 是一些用来更改状态与触发更新的函数
  // 它们可以在模板中作为事件处理器绑定
  methods: {
    async handleSelectUser(){
        let result = {};
      try {
        result = await getFriendListService(this.tokenData);
      } catch (e) {
        console.log(e);
      }
      let data = result.data;
      this.userList=data.friends;
      for(let i = 0; i < data.friends.length; i++){
          this.hasUnreadMsg[data.friends[i].id] = false;
      }
      this.groupList=data.groups;
    },
    filterUsers() {  
      this.filteredUsers = this.userList.filter(user => {  
        return user.name.toLowerCase().includes(this.searchName.toLowerCase());  
      });  
    },
    getHistory() {
      this.history_cnt++
      this.handleGetMessage(this.cur_user_id);
    },
    async handleGetGroupMessage(id){
      this.cur_group_id=id;
      this.cur_user_id=0;
      this.to_user_id=0;
      this.msg_type=2;
      let result={}
      try {
        let req={
            token: localStorage.getItem("token"),
            ip: localStorage.getItem("ip"),
            userId: localStorage.getItem("userId"),
            username: localStorage.getItem("username"),
            group_id:id,
            index:this.history_cnt,
            type:2,
        }
        result = await getMessageService(req);
      } catch (e) {
        console.log(e);
      }
      let data = result.data;
      if(data === undefined || data === null){
        ElMessage({
            message: "无消息！",
            type: "error",
          })
          this.MsgList=[]
        return;
      }
      data.sort((a, b) => {
        const dateA = new Date(a.CreatedAt);  
        const dateB = new Date(b.CreatedAt);  
          
        // 返回时间差，用于排序  
        return dateA - dateB; 
      });
      this.MsgList=data;
      if(this.history_cnt <=2){
        this.scrollToBottom();
      }
    },
    async handleGetMessage(id){
        let result = {};
        if(this.to_user_id!=id){
          this.history_cnt = 2;
        }
        this.to_user_id=id;
        this.cur_user_id=id;
        this.cur_group_id=0;
        this.msg_type=1;
        console.log("uid:",this.uid,"\tcur_user_id:",this.cur_user_id)
        for(let i=0; i<this.userList.length; i++){
            if(this.userList[i].id === id){
                this.cur_user_name=this.userList[i].name;
                break;
            }
        }
        this.hasUnreadMsg[id] = false;
      try {
        let req={
            token: localStorage.getItem("token"),
            ip: localStorage.getItem("ip"),
            userId: localStorage.getItem("userId"),
            username: localStorage.getItem("username"),
            from_user_id:id,
            to_user_id:localStorage.getItem("userId"),
            index:this.history_cnt,
            type:this.msg_type,
        }
        result = await getMessageService(req);
      } catch (e) {
        console.log(e);
      }
      let data = result.data;
      if(data === undefined){
        ElMessage({
            message: "消息获取失败！",
            type: "error",
          })
        return;
      }
      //data sort by created time
      // for (let i = 0; i < data.length; i++) {
      //   for (let j = i + 1; j < data.length; j++) {
      //     if (data[i].CreatedAt > data[j].CreatedAt) {
      //       let temp = data[i];
      //       data[i] = data[j];
      //       data[j] = temp;
      //     }
      //   }
      // }
      data.sort((a, b) => {
        const dateA = new Date(a.CreatedAt);  
        const dateB = new Date(b.CreatedAt);  
          
        // 返回时间差，用于排序  
        return dateA - dateB; 
      });
      this.MsgList=data;
      if(this.history_cnt <=2){
        this.scrollToBottom();
      }
    },
    formatTime(time){
        let date = new Date(time);
          // 提取年、月、日、时、分、秒  
            const year = date.getFullYear();  
            const month = ('0' + (date.getMonth() + 1)).slice(-2); // 月份是从0开始的，所以要加1  
            const day = ('0' + date.getDate()).slice(-2);  
            const hour = ('0' + date.getHours()).slice(-2);  
            const minute = ('0' + date.getMinutes()).slice(-2);  
            const second = ('0' + date.getSeconds()).slice(-2);  
            
            // 重新组合并返回格式化的日期时间字符串  
            return `${year}-${month}-${day} ${hour}:${minute}:${second}`; 
    },

    connectWebSocket() {
      // 连接WebSocket
      let _this = this;
      if (typeof WebSocket == "undefined") {
        console.log("浏览器不支持WebSocket");
      } else {
        console.log("浏览器支持WebSocket");
        let socketUrl =
          "wss://gep.ljsea.xyz/im/ws_v2?to_user_id=" +
          this.to_user_id +
          "&token=" +
          this.tokenData.token;

        // console.log("socketUrl:", socketUrl);
        if (this.socket != null) {
          this.socket.close();
          this.socket = null;
        }
        // 开启一个websocket服务
        this.socket = new WebSocket(socketUrl);
        //打开事件
        this.socket.onopen = function () {
          this.loading=false
          //alert("连接成功");
          ElMessage({
            message: "连接成功",
            type: "success",
          })
        };
        this.socket.onerror = (error) => {
          console.error("WebSocket Error:", error);
        };
        //关闭事件
        this.socket.onclose = function () {
          //alert("连接已关闭!");
          ElMessage({
            message: "连接已关闭",
            type: "error",
          })
        };
        //  浏览器端收消息，获得从服务端发送过来的文本消息
        this.socket.onmessage = async function (msg) {
          //console.log("收到数据====" + msg.data);
          let data = JSON.parse(msg.data); // 对收到的json数据进行解析， 类似这样的：
          // console.log("收到数据====" + data);
          // 如果服务器端发送过来的json数据
          console.log("data.type:", data.type);
          if (data.type == "msg") {  // 如果是消息类型，解密消息内容
           // console.log("收到数据====" + JSON.stringify(msg.data));
            console.log("msg_:", data.data);
            let msg_data=JSON.parse(data.data)
            _this.MsgList.push(msg_data);
            if(_this.cur_user_id != msg_data.FromUserID){
                _this.hasUnreadMsg[msg_data.FromUserID] = true;
            }else{
              _this.scrollToBottom();
            }

            //console.log("msglist:", _this.MsgList);
            // 构建消息内容
          }else if (data.type == "check") {
            //alert("对方已下线");
            console.log(data.type)
          }
        };
      }
    },
    async connectSSE(){
        if (!!window.EventSource) { 
            this.eventSource = new EventSource("https://gep.ljsea.xyz/im/sse_msg?token="+this.tokenData.token);
            let this_=this
            this.eventSource.onopen = function(event) {  
                console.log("连接已建立！");
            };
            this.eventSource.onmessage = function(event) {
                console.log(event.data);
                let msg = JSON.parse(event.data);
                if(msg.type !=="check"){
                    alert(msg);
                    this_.MsgList.push(msg);
                }
             };
            this.eventSource.onerror = (error) => {  
              //重新连接
              this.connectSSE();
            if (this.eventSource.readyState === EventSource.CLOSED) {  
                //console.log('Connection was closed by the server.');  
                ElMessage({
                    message: "连接已关闭！:"+error,
                    type: "error",
                })

                
                // Optionally, try to reconnect  
            } else {  
                //console.error('EventSource failed:', error);  
                ElMessage({
                    message: "连接失败！服务器无法实时推送消息！",
                    type: "error",
                })
                // Handle error  
            }  
        };
        }else{
            ElMessage({
                message: "您的浏览器不支持SSE！",
                type: "error",
            })
        }
    },
    scrollToBottom() {
        this.$nextTick(() => {  
      const scrollbar = this.$refs.chatRoom.$el.querySelector('.el-scrollbar__wrap');  
      if (scrollbar) {  
        scrollbar.scrollTop = scrollbar.scrollHeight;  
      }  
    });  
        },
    async handleSendBtnClick(){
      if(this.currentMsg =="" || this.currentMsg === null){
        ElMessage.error("消息不能为空！");
        return
      }
        let result = {};
      try {
        let req={
            token: localStorage.getItem("token"),
            ip: localStorage.getItem("ip"),
            userId: localStorage.getItem("userId"),
            username: localStorage.getItem("username"),
            from_user_id:localStorage.getItem("userId"),
            to_user_id:this.to_user_id,
            group_id:this.cur_group_id,
            msg:this.currentMsg,
            type:this.msg_type,
        }
        result = await sendMessageService(req);
        if(result.code !==0){
            ElMessage({
                message: "消息发送失败！",
                type: "error",
              })
        }
        let msg={
            ID:result.Data,
            FromUserID:localStorage.getItem("userId"),
            ToUserID:this.to_user_id,
            GroupID:this.cur_group_id,
            Msg:this.currentMsg,
            CreatedAt:new Date(),
        }
        this.MsgList.push(msg);
        this.scrollToBottom();
      } catch (e) {
        console.log(e);
      }
      this.currentMsg="";
    },
    async getIpClient() {
      try {
        const response = await axios.get("https://ipinfo.io/json");
        this.ip = response.data.ip;
        localStorage.setItem("ip", this.ip);
        //console.log(response);
      } catch (error) {
        console.error(error);
      }
    },
    handleMenuSelect(val) {
      router.push(val);
    },
    toVideoList() {
      router.push("/videoList");
    },
    // 修改条纹颜色
    tableRowClassName({ row, rowIndex }) {
      if (row.human === 1) {
        return {
          background: "#488aff",
        };
      } else {
        return "";
      }
    },
  },

  // 生命周期钩子会在组件生命周期的各个不同阶段被调用
  // 例如这个函数就会在组件挂载完成后被调用
  async mounted() {
    let now = new Date();
    if (localStorage.getItem("token") === null) {
      router.push("/login");
    }
    // console.log("mounted");
    await this.getIpClient();
    await this.handleSelectUser();
    this.filteredUsers=this.userList;
    //await this.connectSSE();
    this.connectWebSocket();
    this.handleGetMessage(this.userList[0].id);
  },
  onUnmounted() {
    if (this.eventSource) {
      this.eventSource.close();
    }
  },
};
</script>

<style scoped>
.layout-container-demo .el-header {
    position: relative;
    /* background-color: var(--el-color-primary-light-7); */
    color: var(--el-text-color-primary);
}

.layout-container-demo .el-aside {
    color: var(--el-text-color-primary);
    /* background: var(--el-color-primary-light-8); */
}

.layout-container-demo .el-menu {
    border-right: none;
}

.layout-container-demo .el-main {
    padding: 0;
}

.layout-container-demo .toolbar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    right: 5px;
}

.msg {
    background-color: #73d1f3;
    /* box-shadow: rgba(18, 23, 45, 0.6) 0px 8px 24px; */
    border-radius: 4px;
    padding: 10px;
    font-size: 18px;
    line-height: 16px;
    /* width: auto; */
    /* max-width: 330px; */
    margin-top: 20px;
    color: white;
}

.msg2 {
    background-color: #12B7F5;
    /* box-shadow: rgba(18, 23, 45, 0.6) 0px 8px 24px; */
    border-radius: 4px;
    padding: 10px;
    font-size: 18px;
    line-height: 16px;
    /* width: auto; */
    /* max-width: 330px; */
    margin-top: 20px;
    color: white;
}
.unread-dot {  
  position: absolute;  
  top: 0;  
  right: 0;  
  width: 8px;  
  height: 8px;  
  background-color: red;  
  border-radius: 50%;  
  transform: translate(50%, -50%);  
}  
</style>