什麼是webSocket?
WebSocket 是 HTML5 開始提供的一種在單個 TCP 連接上進行全雙工通訊的協議。
WebSocket 使得客戶端和服務器之間的數據交換變得更加簡單,允許服務端主動向客戶端推送數據。在 WebSocket API 中,瀏覽器和服務器只需要完成一次握手,兩者之間就直接可以創建持久性的連接,並進行雙向數據傳輸。
webSocket的原理圖?
webSocket的基本使用
客戶端:
//建立連接
const ws = new webScoket('ws://localhost:9999')
//監聽關閉
ws.onclose = ()=>{
console.log(客戶端關閉連接")
}
//發送數據
btn.onclick = function(){
ws.send(msg.value)
}
//接收服務器返回的數據
ws.onmessage = (remsg) =>{
console.log(remsg.data)
}
服務端 - node.js - app.js
//引入依賴
const ws = require('nodejs-websocket');
//建立連接
const wserver = ws.createServer(websocket=>{
// 錯誤處理
websocket.on('err',err=> {
if(err) throw err
})
// 關閉連接
websocket.on('close',()=> {
console.log("服務器連接已經關閉")
})
// 錯誤處理
websocket.on('err',err=> {
if(err) throw err
})
接收客戶端發送數據
websocket.on('text',msg=>{
console.log(msg)
//返回給客戶端
websocket.sendText()
})
})
wserver.listen(9999)
console.log('服務器建立連接成功')
//發送信息
socket.emit('自定義事件',發送數據)
//接收信息
socket.on('自定義事件',(data)=>{
//data - 接收到的數據
})
//廣播數據
io.sockets.emit('自定義事件',廣播數據)