socket.io實現多人聊天

1、 后端環境搭建

# npm init
# npm install -s express
# npm install -s socket.io 

npm init 會生成json文件作為依賴包，express和socket.io插件安裝完成后會生成node_modules文件夾和package-lock.json鎖依賴文件，該文件記錄插件的版本。

完成以上步驟並創建index.js文件作為后端的入口文件。

2、 后端入口文件

1）在index,js內首先需要引入已經安裝的插件

/* 引入插件 */
const express = require('express')
const socket = require('socket.io')
const app = express()

2）需要設置跨域訪問

/* 設置跨域訪問 */
app.all('*', function (req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header('Access-Control-Allow-Headers', 'Content-Type, Content-Length, Authorization, Accept, X-Requested-With , yourHeaderFeild');
  res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");
  res.header("X-Powered-By", ' 3.2.1')
  res.header("Content-Type", "application/json;charset=utf-8");
  next();
});

3）監聽端口號並響應前台請求

/* 監聽端口號 */
const server = app.listen(4000,()=>{
  console.log('正在監聽4000端口...')
})
/* 監聽前端請求事件 */
const io = socket(server)
let num = 0 //在線總人數
io.on('connection',(socket) => {
    // 響應連接（響應體）
}

當前台使用io.connect（）連接端口號的時候，后端就會監聽到並響應。以下代碼都在響應體內

4）響應體 -- 監聽某某上線

let auther = null //上線人名稱
num++
// 上線
socket.on('online',(name)=>{
  console.log(name+'上線 ')
  auther = name
  const obj = {
    num: num,
    name: name
  }
  io.sockets.emit('online',obj)
})

某某上線時，需要先將上線總人數加一，前台連接完成后馬上就會向后台傳遞名稱name給online事件，后台監聽到online事件，記錄上線人的名稱，這里主要用於后面的離線。然后將某某上線的信息通過io.sockets廣播給所有（包括自己）已經連接的頁面。

5）響應體 -- 監聽某某正在輸入

// 監聽正在輸入...
socket.on('typing',(name) => {
  socket.broadcast.emit('typing',name)
});

當某某在input標簽輸入內容時，會將名稱發給后台typing事件，后台監聽typing並響應，通過socket.broadcast廣播給所有頁面（除了自己）

6）響應體 --  監聽發言

// 接收發言並返回
  socket.on('chat',(data) => {
    io.sockets.emit('chat',data)
    console.log(data)
  });

 

某某在前台向后台chat事件發送信息（內容和名稱），后台監聽chat事件並響應，將信息廣播給所有頁面。

7）響應體 --  監聽離線

// 監聽離線...
  socket.on('disconnect',()=>{
    console.log(auther+'離線...')
    num--
    const obj = {
      num: num,
      name: auther
    }
    io.sockets.emit('offline',obj)
  });

前台離開頁面時會觸發disconnect事件，后台監聽到disconnect事件並作出響應，將之前保存的名稱和減一的在線總人數廣播給所有頁面。到這里，后端的所有邏輯就已經准備就緒，可以啟動后端了.......

3、 前台請求體

本次前台頁面使用vue編寫，

1） 引入socket.io（在vue項目的根頁面index.html內引入），引入之后io就可以使用了

<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.2.0/socket.io.dev.js"></script>

2） 在首頁內需要先生成自己的名稱（這里我隨機生成名稱 ），連接后台並把名稱傳給后台，告訴其他頁面某某加入聊天了。這里我創建了一個類用於處理連接后台，該類一旦創建，constructor就會執行，因此就會連接后台並傳遞名稱給后台，后台監聽online並接受數據，然后廣播給所有頁面。

this.auther = '阿' + Math.floor(Math.random()*20)
this.chat = new Chat(this.auther)
//類chat內有connect方法
connect() {
　this.socket = io.connect('http://10.112.169.51:4000')
　this.socket.emit('online',this.name)
}

3） 接收某某上線，已經向后台觸發online事件，這時需要接收后台廣播的上線人數和某某上線

this.chat.socket.on('online',(obj)=>{
  this.title = `在線網友(${obj.num}人)`
  this.keypress = `${obj.name}加入聊天`
})

4） 接收正在輸入，當input有值的時候需要傳名稱給后台，后台也會廣播給所有頁面，同時需要接收廣播的數據

watch: {
  value() {
    this.chat.socket.emit('typing', this.value.trim() ? this.auther : '')
  }
},

this.chat.socket.on('typing',(data)=>{

　　this.keypress = data ? data+'正在輸入...' : ''

})

5） 接收發言，前台通過發送按鈕將發言信息和名稱傳給后台，后台廣播給所有頁面，所有需要接收廣播信息

this.chat.socket.on('chat',(data)=>{
   this.list.push({
     imgUrl: require('@/assets/styles/images/asan.jpg'),
     auther: data.name,
     content: data.value,
     self: data.name === this.auther
   })
   setTimeout(()=>{
     if(this.scroll.maxScrollY) this.scroll.scrollTo(0,this.scroll.maxScrollY)
   },100)
})

6） 離線處理，前台在離開頁面的時候會告訴后台斷開連接。到此，前台的主要邏輯也已經完成（由於只附上主要邏輯，具體代碼可看我的github前台，github后台），啟動前台

disconnect() {
  this.socket.disconnect()
}

4、流程圖

5、效果圖

 

 6、參考文獻

https://socket.io/docs/

https://hackernoon.com/an-overview-of-frontend-and-backend-interaction-48l031ba