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旁邊的草叢里聊天，就這樣在李白和瑤互相拉票舉報對方的全域訊息中游戲結束
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/151757.html
標籤：JavaScript
上一篇：釘釘開放與商業化團隊前端大量招人
下一篇：學習vue