Vue+express+Socket實(shí)現聊天功能

本文實(shí)例為大家分享了Vue+express+Socket實(shí)現聊天功能的具體代碼，供大家參考，具體內容如下

實(shí)現聊天功能

具體功能

只是為了實(shí)現功能，不對界面進(jìn)行美化

1、輸入消息點(diǎn)擊發(fā)送所有用戶(hù)可以在下方收到消息

2、輸入userid后點(diǎn)擊連接，可以連接對應的聊天，另外一個(gè)界面輸入剛剛那個(gè)頁(yè)面的userid后再輸入內容點(diǎn)擊發(fā)送給指定的人，則剛才那個(gè)頁(yè)面可以打印輸出，而其他頁(yè)面不會(huì )收到，實(shí)現私聊的功能

3、沒(méi)有具體實(shí)現私聊的內容顯示，但是接收發(fā)送消息都可以實(shí)現，要實(shí)現私聊的內容顯示可以再添加一個(gè)私聊頁(yè)面

界面截圖

項目準備

只對socket準備進(jìn)行介紹，Vue和express的搭建不進(jìn)行介紹

前端 socket

安裝

npm i vue-socket.io --save

導入

import VueSocketIO from 'vue-socket.io'

后臺socket

安裝

npm i socket.io --save

導入

在express-generator生產(chǎn)的bin/www文件夾中加入

var io = require('socket.io')(server)'

io.on('connection',  (socket) => {
  socket.on('demining',  (data) => {
    console.log(data);
  });
});

具體截圖如下：

項目實(shí)現

Vue代碼

HTMl代碼

<div class="home">
    userid: <input type="text" v-model="userid">
    昵稱(chēng)：<input type="text" v-model="name">
    消息：<input type="text" v-model="msg" />
    <button @click="send">發(fā)送</button>
    <button @click="join">連接</button>
    <button @click="sendmsg">發(fā)送給指定的人</button>

    <ul>
      <li v-for="(item,index) in chatList" :key="item.name + index">
        {{ item.name }}說(shuō)：{{ item.msg }}
      </li>
    </ul>
</div>

js代碼

export default {
  name: "Home",
  data() {
    return {
      users: [],
      msg: "",
      chatList: [],
      name: '',
      userid: ''
    };
  },
  sockets: {
    // 連接后臺socket
    connect() {
      console.log('socket connected');
    },
    // 用戶(hù)后臺調用，添加數據
    sendMessage(data) {
      console.log(data);
      this.chatList.push(data)
    },
    // 用戶(hù)后臺調用，打印數據
    receivemsg(data) {
      console.log('receivemsg');
      console.log(data);
    }
  },
  methods: {
    // 發(fā)送消息給后臺
    send() {
      // 使用emit調用后臺的socket中的message方法
      this.$socket.emit("message", {
        userid: 100,
        name: this.name,
        msg: this.msg
      });
    },
    // 建立用戶(hù)連接
    join() {
      this.$socket.emit("join", {
        userid: this.userid
      });
    },
    // 發(fā)送消息給后臺 用于私發(fā)消息
    sendmsg() {
      this.$socket.emit("sendmsg", {
        userid: this.userid,
        msg: this.msg
      });
    }
  }
};

express代碼

在剛才的www文件定義的連接中添加一下代碼

// 用于存儲每個(gè)用戶(hù)的socket，實(shí)現私聊的功能
let arrAllSocket = {}
// 穿件socket連接
io.on('connection', (socket) => {
  console.log('連接上了');
  // console.log(socket);
  // join函數 用于用戶(hù)連接
  socket.on('join', function (obj) {
    console.log(obj.userid + 'join')
    // 保存每個(gè)用戶(hù)的連接狀態(tài) 用于私發(fā)消息
    arrAllSocket[obj.userid] = socket
  })
  // 接收前臺發(fā)送的消息 函數名為message
  socket.on('message', (data) => {
    console.log(data);
    // 將消息發(fā)送回前臺（調用前臺定義的方法） 函數名為sendMessage
    io.emit('sendMessage', data);
  });
  // 私發(fā)消息
  socket.on('sendmsg', function (data) {
    console.log(data);
    // 查詢(xún)用戶(hù)連接
    let target = arrAllSocket[data.userid]
    if (target) {
      //發(fā)送信息至指定的人
      target.emit('receivemsg', data)
    }
  })
})

后臺代碼封裝

由于www文件不應該寫(xiě)太多代碼，所以對這一部分代碼進(jìn)行封裝

1、在項目目錄下創(chuàng )建一個(gè)io的文件夾，結構如下

2、將剛才的那部分代碼移入io/index.js中

代碼如下

// 將server作為參數傳入
module.exports = function (server) {
  var io = require('socket.io')(server);
// 用于存儲每個(gè)用戶(hù)的socket，實(shí)現私聊的功能
  let arrAllSocket = {}
// 穿件socket連接
  io.on('connection', (socket) => {
    console.log('連接上了');
    // console.log(socket);
    // join函數 用于用戶(hù)連接
    socket.on('join', function (obj) {
      console.log(obj.userid + 'join')
      // 保存每個(gè)用戶(hù)的連接狀態(tài) 用于私發(fā)消息
      arrAllSocket[obj.userid] = socket
    })
    // 接收前臺發(fā)送的消息 函數名為message
    socket.on('message', (data) => {
      console.log(data);
      // 將消息發(fā)送回前臺（調用前臺定義的方法） 函數名為sendMessage
      io.emit('sendMessage', data);
    });
    // 私發(fā)消息
    socket.on('sendmsg', function (data) {
      console.log(data);
      // 查詢(xún)用戶(hù)連接
      let target = arrAllSocket[data.userid]
      if (target) {
        //發(fā)送信息至指定的人
        target.emit('receivemsg', data)
      }
    })
  })
}

最后在www文件中使用如下代碼，引入文件

var io = require('../io')
io(server)

至此，聊天的基本功能實(shí)現。記錄一下方便以后使用。

以上就是本文的全部?jì)热?，希望對大家的學(xué)習有所幫助，也希望大家多多支持腳本之家。