koa-socket即時通訊

xu52501發表於2019-02-16

前言

http的特點是一問一答，而即時通訊是需要雙向通訊的，這樣以前的即時通訊只能使用輪詢的方式通過週期性的ajax請求獲取資料，直到websocket出現，就完美實現了雙向通訊

一 即時通訊方式簡介

  1. 段輪詢
    前臺使用setInterval進行定時請求後臺，這樣無疑非常浪費效能
  2. 長輪詢和長連線（html5的EventSource）
    客服端連線一次，服務端不斷開連線，服務端接收到新訊息就傳送給前臺，客服端和服務端保持一直連線，缺點是隻有服務端向客服端輸出
  3. websocket
    websocket不再是走http協議，而是升級為websocket協議，說到底就是走應用層協議（tcp），實現雙向通訊，缺點是相容性問題（ie11）
  4. socket.io
    上面的方式都存在一定問題，自然就有人封裝一套完美的解決方案，socket.io就是集合了上面幾種方案的另一種解決方案

二 即時通訊實現

  1. 客服端
  • 引入包：<script src=”https://cdn.socket.io/socket….;></script>

  • 服務端和客服端通過on和emit進行互動
    emit表示傳送，事件名自定義，另一端用on進行接收
    on表示接受，類似jq繫結事件，事件名對應emit事件名
    connect，disconnect是連線和斷開事件

       // 建立連線
   var socket= io(`http://localhost:80`)
   // on表示接收
   // emit表示傳送
   socket.on(`connect`, function () {
       console.log(`連線上了`)
       // 登入，同步前後端資訊
       // 請求後端login介面，寫入socketid
       socket.emit(`login`, {
           // 身份標識，可以是時間戳或者唯一id，最要用來回去socketid進行私聊
           id: username
       })
   })


   // 傳送訊息，這裡可以用傳送事件進行訊息傳送
   socket.emit(`sendMsg`, {
       newAccount: `xxxxxx`
   })
   
   // 接收訊息
   socket.on(`msg1`, function (data) {
       // 可以對資料進行渲染
       console.log(data)
      
   })
   socket.on(`allmessage`, function (data) {
       // 接收所有人訊息
       console.log(data);

   })
   
   // 表示連線斷開了
   socket.on(`disconnect`, function () {
       console.log(`聊天伺服器斷開了`)
   })
  • 服務端(koa+koa-socket)
  • 安裝koa-socket
    npm i koa2 koa-socket -S
    const IO = require(`koa-socket`)
    const Koa = require(`koa2`)
    const io = new IO()
    
    const app = new Koa()
    
    // 將socket和app關聯
    io.attach(app)
    // 和客服端進行連線
    io.on(`connection`, (context) => {
        console.log(`連線上了`)
    })
    // 接收訊息
    io.on(`sendMsg`, function (context) {
        //console.log(context.data)
        // 向客服端實時傳送訊息
        io.broadcast(`msg1`, `我是伺服器來的`)

        // 廣播，所有人訊息
        io.broadcast(`allmessage`, context.data.newAccount)
    })

    // 處理登陸同步資訊
    io.on(`login`, context => {
        let id = context.data.id;
        console.log(context);
    });

總結

上面就是koa-socket使用的簡單介紹，只實現了簡單的訊息推送和接收，後面還有私聊和群發，其原理是獲取到每個使用者的socketid，傳送訊息時對應傳送，後面再進行更新

相關文章