WebSocket 簡介

傳統的客戶端和伺服器通信協議是HTTP：客戶端發起請求，服務端進行響應，服務端從不主動勾搭客戶端。

這種模式有個明顯軟肋，就是同步狀態。而實際應用中有大量需要客戶端和伺服器實時同步狀態的場景，比如聊天室、股票行情、線上共用文檔等都需要客戶端實時拿到伺服器的最新狀態。

針對這種實時同步的需求，一種簡單的方式是輪詢，比如每隔5s發一次http請求去拿伺服器最新的狀態數據。但這種方式會存在數據延遲，浪費帶寬等副作用。

更完美的方式是使用WebSocket，瀏覽器原生支持，W3C標準協議，客戶端和伺服器建立持久性連接可以互發消息。

socket.io 簡介

socket.io 是一個類庫，內部封裝了WebSocket，可以在瀏覽器與伺服器之間建立實時通信。

如果某些舊版本的瀏覽器不支持WebSocket，socket.io會使用輪詢代替。另外它還具有可發送二進位消息、多路復用、創建房間等特性，因此相比直接使用原生WebSocket，socket.io是更好的選擇。

開發一個實時應用主要分兩部分：服務端和客戶端，socket.io分別提供了相應的npm包供我們方便地調用。

接下來就通過一個生動形象且有趣的慄子分別介紹這兩大塊。

現在假設李白，瑤，呂布，後羿，貂蟬5個人加入了一個叫 KPL 的房間，在文章結束時我們將擁有一個麻雀雖小五臟俱全的峽谷英雄線上聊天室

服務端api

首先安裝socket.io提供的服務端npm包：

npm i socket.io

可以與 Express 框架配合使用：

const http = require('http')
const app = require('express')()
const server = http.createServer(app)
const io = require('socket.io')(server)
server.listen(3000)

也可以與 Koa 框架配合使用

const http = require('http')
const Koa = require('koa')
const app = new Koa()
const server = http.createServer(app.callback())
const io = require('socket.io')(server)
server.listen(3000)

使用起來就是這麼簡單。接下來就可以寫業務邏輯啦

io.on('connect', client => { // client 即是連接上來的一個客戶端
  console.log(client.id) // id 是區分客戶端的唯一標識

  client.on('disconnect', () => {}) // 客戶端斷開連接時調用(可能是關掉頁面，網路不通了等)
})

connect 和 disconnect 是 socket.io 內置的事件類型，用於在客戶端連接和斷開的時候做一些事情。

在客戶端建立連接時需要把他們加入到一個房間里去，類似創建了一個聊天室

  console.log(client.id)
+ client.join('KPL') // 將客戶端加入到 KPL 房間內
  client.on('disconnect', () => {})

緊接著瑤進來秒發了首條消息：我打野，不給就送

伺服器在收到這條振奮人心的消息後需要立即同步給其他四位隊友

  client.join('KPL')
+ client.on('talk', message => {
+   client.to('KPL').emit('talk', message) // 發送給房間里的每個人，除了發送者
+ })
  client.on('disconnect', () => {})

服務端的功能到這基本上就開發完了。創建了一個房間，併在收到成員消息時立即同步給房間里的其他成員

客戶端api

socket.io 為客戶端提供了另一個npm包，直接安裝

npm i socket.io-client

接下來就可以在頁面上建立到伺服器的連接啦

import io from 'socket.io-client'

const socket = io() // 建立連接

向伺服器發送消息

  const socket = io()
+ socket.emit('talk', '我打野，不給就送')

接收伺服器發來的消息

  const socket = io()
+ socket.on('talk', message => {
+ })

李白看到了瑤的消息，強忍住問候對方家人的衝動，像哄那啥似地說道：

  socket.on('talk', message => {
+   socket.emit('talk', '你買個石頭騎在我頭上他不香麽')
  })

客戶端的功能到這基本上也開發完了。核心api就是on和emit用於收發消息，既簡單又優雅。

最後

至此一個可以實時發送接收消息的聊天室就完成了，雖然簡陋，但核心功能完備。

瑤最終倔強地打了野，李白選擇了上路，3分鐘被對面捶到高地，後羿在家裡等鳥，呂布和貂蟬躲在藍buff旁邊的草叢裡聊天，就這樣在李白和瑤互相拉票舉報對方的全局消息中游戲結束