本文例項為大家分享了+express+Socket實現聊天功能的具體程式碼，供大家參考，具體內容如下

實現聊天功能

具體功能

只是為了實現功能，不對介面進行美化

1、輸入訊息點擊發送所有使用者可以在下方收到訊息

2、輸入userid後點擊連線，可以連線對應的聊天，另外一個介面輸入剛剛那個頁面的userid後再輸入內容點擊發送給指定的人，則剛才那個頁面可以列印輸出，而其他頁面不會收到，實現私聊的功能

3、沒有具體實現私聊的內容顯示，但是接收發送訊息都可以實現，要實現私聊的內容顯示可以再新增一個私聊頁面

介面截圖

專案準備

只對socket準備進行介紹，Vue和express的搭建不進行介紹

前端 socket

安裝

npm i vue-socket.io --save

匯入

import VueSocketIO from 'vue-socket.io'

後臺socket

安裝

npm i socket.io --save

匯入

在express-generator生產的bin/www資料夾中加入

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

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

具體截圖如下：

專案實現

Vue程式碼

HTMl程式碼

<div class="home">
    userid: <input type="text" v-model="userid">
    暱稱：<input type="text" v-model="name">
    訊息：<input type="text" v-model="msg" />
    <button @click="send">傳送</button>
    <button @click="join">連線</button>
    <button @click="sendmsg">傳送給指定的人</button>

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

程式碼

export default {
  name: "Home",data() {
    return {
      users: [],msg: "",chatList: [],name: '',userid: ''
    };
  },sockets: {
    // 連線後臺socket
    connect() {
   客棧   console.log('socket connected');
    },// 使用者後臺呼叫，新增資料
    sendMessage(data) {
      console.log(data);
      this.chatList.push(data)
    },// 使用者後臺呼叫，列印資料
    receivemsg(data) {
      console.log('receivemsg');
      console.log(data);
    }
  },methods: {
    // 傳送訊息給後臺
    send() {
      // 使用emit呼叫後臺的socket中的message方法
      this.$socket.emit("message",{
        userid: 100,name: this.name,msg: this.msg
      });
    },// 建立使用者連線
    join() {
      this.$socket.emit("join",{
        userid: this.userid
      });
    },// 傳送訊息給後臺 用於私發訊息
    sendmsg() {
      this.$socket.emit(BgpMrxCj"sendmsg",{
        userid: this.userid,msg: this.msg
      });
    }
  }
};

express程式碼

在剛才的www檔案定義的連線中新增一下程式碼

// 用於儲存每個使用者的socket，實現私聊的功能
let arrAllSocket = {}
// 穿件socket連線
io.on('connection',(socket) => {
  console.log('連線上了');
  // console.log(socket);
  // join函式 用於使用者連線
  socket.on('join',function (obj) {
    console.log(obj.userid + 'join')
    // 儲存每個使用者的連線狀態 用於私發訊息
    arrAllSocket[obj.userid] = socket
  })
  // 接收前臺傳送的訊息 函式名為message
  socket.on('message',(data) => {
    console.log(data);
    // 將訊息傳送回前臺（呼叫前臺定義的方法） 函式名為sendMessage
    io.emit('sendMessage',data);
  });
  // 私發訊息
  socket.on('sendmsg',function (data) {
    console.log(data);
    // 查詢使用者連線
    let target = arrAllSocket[data.userid]
    if (target) {
      //傳送資訊至指定的人
      target.emit('receivemsg',data)
    }
  })
})

後臺程式碼封裝

由於www檔案不應該寫太多程式碼，所以對這一部分程式碼進行封裝

1、在專案目錄下建立一個io的資料夾，結構如下

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

程式碼如下

// 將server作為引數傳入
module.exports = function (server) {
  var io = require('socket.io')(servwww.cppcns.comer);
// 用於儲存每個使用者的socket，實現私聊的功能
  let arrAllSocket = {}
// 穿件socket連線
  io.on('connection',(socket) => {
    console.log('連線上了');
    // console.log(socket);
    // join函式 用於使用者連線
    socket.on('join',function (obj) {
      console.log(obj.userid + 'join')
      // 儲存每個使用者的連線狀態 用於私發訊息
      arrAllSocket[obj.userid] = socket
    })
    // 接收前臺傳送的訊息 函式名為message
    socket.on('message',(data) => {
      console.log(data);
      // 將訊息傳送回前臺（呼叫前臺定義的方法） 函式名為sendMessage
      io.emit('sendMessage',data);
    });
    // 私發訊息
    socket.on('sendmsg',function (data) {
      console.log(data);
      // 查詢使用者連線
      let target = arrAllSocket[data.userid]
      if (target) {
        //傳送資訊至指定的人
        target.emit('receivemsg',data)
      }
    })
  })
}

最後在www檔案中使用如下程式碼，引入檔案

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

至此，聊天的基本功能實現。記錄一下方便以後使用。

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。