基于vue2.x实现的即时通讯程序仿微信聊天6对接好友列表以及记

2022-11-05  本文已影响0人  风中凌乱的男子
const api = {
  GetMyFriends:'/api/myfriends'
}
// 获取我的好友列表
export function getMyFriends(data) {
  return request({
    url: api.GetMyFriends,
    method: 'post',
    data,
  })
}
import { getMyFriends } from '@/api/user'
methods:{
   async getMyFriendsFun() {
      try {
        const res = await getMyFriends()
        console.log(res)
        this.list = res.data //注意:【list】要在data内预定义成空数组,即 list:[]
      } catch (error) {
        console.log(error)
      }
    }
}
  mounted () {
    this.getMyFriendsFun();
  }
image.png
image.png

const api = {
  GetChatMsg:'/api/query/msg'
}
// 获取好友列表记录
export function getChatMsg(params) {
  return request({
    url: api.GetChatMsg,
    method: 'get',
    params,
  })
}
import { getChatMsg } from '@/api/user';
methods:{
  toDetailPage(item) {
      this.$router.push('/chatDetail/'+item._id)
  },
}
methods:{
  async getChatMsgFun() {
      try {
        const res = await getChatMsg({ toId: this.$route.params.id })
        console.log(res);
        this.list = res.data; //注意:【list】要在data内预定义成空数组,即 list:[]
      } catch (error) {
        console.log(err)
      }
    }
}
mounted () {
    this.getChatMsgFun();
},
image.png
image.png
image.png
image.png
image.png
image.png
image.png
image.png
getUserInfo({ commit, state }) {
    return new Promise((resolve, reject) => {
      getUserInfo().then(response => {
        const { data } = response
        if (!data) {
          return reject('Verification failed, please Login again.')
        }
        const { username } = data
        commit('SET_USER_NAME', data)
        resolve(data)
      }).catch(error => {
        reject(error)
      })
    })
  },
image.png
import { mapGetters } from 'vuex';
computed: {
    ...mapGetters(['userName'])
},
image.png
image.png
13、下面来分析下如何渲染左侧数据
image.png
<template>
  <div class="chatList">
    <ul>
      <template v-for="(item,index) in list" >
      <!-- 左侧 -->
      <li v-if="$route.params.id==item.send_id" :key="index">
        <div class="left">
          <img :src="item.send_avatar" alt="">
        </div>
        <div class="right">
          <p class="time">{{item.date}}</p>
          <p class="content">
            {{item.message}}
          </p>
        </div>
      </li>
      <!-- 右侧 -->
      <li class="r" v-if="item.send_id==userName._id" :key="index">
        <div class="right">
          <p class="time">{{item.date}}</p>
          <p class="content">
            {{item.message}}
          </p>
        </div>
        <div class="left">
          <img :src="item.send_avatar" alt="">
        </div>
      </li>
    </template>
    </ul>
  </div>
</template>

<script>
import { mapGetters } from 'vuex';
export default {
  props:['list'],
  data() {
    return {
      
    }
  },
  computed: {
    ...mapGetters(['userName'])
  },
}
</script>

<style lang="scss" scoped>
.chatList{
  ul{
    padding: 20px;
    box-sizing: border-box;
    li{
      display: flex;
      margin-bottom: 40px;
      .left{
        width: 92px;
        height: 92px;
        margin-right: 16px;
        img{
          width: 100%;
          height: 100%;
          border-radius: 50%;
        }
      }
      .right{
        flex: 1;
        p{
          margin: 0;
        }
        p.time{
          font-size: 24px;
          margin-bottom: 8px;
        }
        p.content{
          font-size: 28px;
          background: #00ccb8;
          padding: 12px;
          border-radius: 12px;
          color:#fff;
          display: inline-block;
        }
      }
    }
    li.r{
      p.time{
        text-align: right;
      }
      p.content{
        background: #f37d7d;
        text-align: left;
      }
      .left{
        margin-left: 16px;
        margin-right: 0;
      }
      .right{
        text-align: right;
      }
    }
  }
}
</style>
image.png


cnpm install socket.io --save

---- 代码演示过程

var express = require('express');
var router = express.Router();
/**
 * socket.io
 */
var app = express();
var server = require('http').Server(app);
var io = require('socket.io')(server, {
  transports: ['websocket']
});
server.listen(3001);
/**
 * 监听客户端连接
 */
io.on('connection', function (socket) {
  console.log("客户端连接成功~");
});


module.exports = router;

require("./routes/index")
cnpm  install socket.io-client vue-socket.io-extended --save
// 引入socket
import './utils/socketIo'
import Vue from 'vue'
import VueSocketIOExt from 'vue-socket.io-extended';
import io from 'socket.io-client';
// 链接websocket
const socket = io.connect('ws://localhost:3001', {
    transports: ['websocket'],
})
Vue.use(VueSocketIOExt, socket);
image.png
image.png

比如在chatDetail页面mounted生命周期内直接执行事件注册方法

mounted () {
      this.$socket.client.emit('sayHello', {
      name: this.$route.query.name == '孙悟空' ? '唐僧' : '孙悟空',
      message: this.$route.query.name == '孙悟空' ? '为师想留在女儿国~' : '俺老孙来也~'
    })
  },
image.png
/**
 * 监听客户端连接
 */
io.on('connection', function (socket) {
  console.log("客户端连接成功~");
  //广播给除发送者外的所有人
  socket.on("sayHello",data=>{
    socket.broadcast.emit("broMsg",data)
  })
});
image.png
sockets:{
    broMsg: function (data) {
      this.info = data
    }
},
 <div class="test" v-if="info" style="font-size: 12px;text-align: center;">
        <span>{{info.name}}</span>上线了,并说了一句<span>{{info.message}}</span>
</div>
image.png
image.png
methods:{
   sendMsg() {
      if (this.value.trim() == '') {
        this.$toast('请输入聊天内容')
        return
      }
      let obj = {
        come_id: this.$route.params.id, //接收方的id
        send_id: this.userName._id, //发送方的id
        type: 1, //消息类型 1 文字消息
        send_avatar: this.userName.avatar, //发送者的头像
        message: this.value, //发送的文字内容
        send_name: this.userName.nickname, //发送者的昵称
        date:new Date(),//发送的当前时间
      }
      this.$socket.client.emit('sayOne', obj)
    }
}
image.png
this.$socket.client.emit('login', this.userName._id)
socket.on("login", data => {
    // console.log(data);
    var _id = data;
    hashName[_id] = socket.id;
})
 /** 监听sayOne事件 */
  socket.on('sayOne', data => {
    // console.log(data);
    var toName = data.come_id;
    // console.log(hashName);
    // console.log(hashName[toName]);
    if (hashName[toName]) {
      socket.to(hashName[toName]).emit('message', data)
    }
  })
 sockets: {
    message:function(data){
      // console.log(data);
      this.$refs.childCom.list.push(data)
    },
  },
image.png
image.png
sendMsg() {
      if (this.value.trim() == '') {
        this.$toast('请输入聊天内容')
        return
      }
      let obj = {
        come_id: this.$route.params.id, //接收方的id
        send_id: this.userName._id, //发送方的id
        type: 1, //消息类型 1 文字消息
        send_avatar: this.userName.avatar, //发送者的头像
        message: this.value, //发送的文字内容
        send_name: this.userName.nickname, //发送者的昵称
        date:new Date(),//发送的当前时间
      }
      this.$socket.client.emit('sayOne', obj)
      this.$refs.childCom.list.push(obj)

    }
image.png
image.png
{{$formatDate(item.date,'yyyy-MM-dd hh:mm:ss')}}
image.png
上一篇 下一篇

猜你喜欢

热点阅读