▼

Websocket簡單範例

 Websocket是一種網路傳輸協定，可以在TCP連接上全雙工通訊，允許伺服器端主動向客戶端推播資料，只要一次的交握，就可以建立不中斷的連接，以進行雙工通訊。

例如為了取得數個球場上比賽的即時分數，因為每個球場比賽得分的時間都不相同，所以使用的方式是在client端每隔幾秒就向Server發送一次http request，向Server取回最新的訊息。

若改以Websocket，因為可以保持連線，所以不必像http request每一次的連線，都需要重送header等重覆的資料，可加快傳輸的速度。

另外，Websocket因為可以由Server來廣播資料，所以當server收到來自A球場的比數時，可以同時將比數發送給B球場、C球場的client。

以http request的方式，必需讓A、B、C球場每隔數秒就要連線一次，但是每次的連線都不一定會有新的資料，這樣的做法會增加Server的負擔。

以下是我測試Websocket的程式，我用node.js來架設server。

node.js：安裝ws套件，npm install ws

建立app.js，內容如下：

//import  ws 套件
const SocketServer = require('ws').Server

const express = require('express')
const path = require('path')

//設定port
const PORT = 80 

const routeAPI = express.Router();

const app = express()

app.use('/', express.static(__dirname + '/'));

routeAPI.route('/')
    .get((req, res) => {
        res.status(200).send("OK");
    })

routeAPI.route('/test01')
    .get((req, res) => {
        res.sendFile('test01.html', { root: path.join(__dirname) });
    })


app.use('/', routeAPI);


//創建 express 物件，綁定監聽  port , 設定開啟後在 console 中提示
const server = app.listen(PORT, () => {
    console.log("Listening on ${PORT}")
})


//將 express 交給 SocketServer 開啟 WebSocket 的服務
const ws = new SocketServer({ server })

//當client連線時
ws.on('connection', ws_conn => {
  console.log('Client connected')
  
  //收到client資料時
  ws_conn.on("message", data => {
    //client資料是Buffer格式，需要轉成字串
    data = data.toString()  
    console.log(data) 

    // 發送消息給client 
    ws_conn.send("server return:" + data)
    
    //取得所有連接中的 client
    let clients = ws.clients 
	
    //發送資料至每個client
    clients.forEach(client => {
      client.send("server return :" + data)  
    })
  })
})

//當連線關閉
ws.on('close', () => {
  console.log('Close connected')
})


建立test01.html，內容如下：


<!DOCTYPE html>
<html lang="zh-TW">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title> WebSocket Test</title>
</head>

<body>
    <textarea id="txtShow" disabled></textarea>
    <input id="txtInput" type="text">
    <button id="btnSend">送出</button>
    <button id="btnClose">關閉</button>
</body>

</html>

<script src="jquery-3.4.1.min.js"></script>

<script>

    // 建立 WebSocket (本例 server 端於本地運行)
    let url = 'ws://192.192.192.10:9910'
    var ws = new WebSocket(url)
    // 監聽連線狀態
    ws.onopen = () => {
        console.log('open connection')
    }
    ws.onclose = () => {
        console.log('close connection');
    }
    //接收 Server 發送的訊息
    ws.onmessage = event => {
        console.dir(event)
        let txt = event.data
        $("#txtShow").val(txt)
    }

    
    $('#btnSend').on('click',() => {
        let txt = $('#txtInput').val()
        //發送訊息
        ws.send(txt)
    })

    $("#btnClose").on('click',() => {
        ws.close()
    })

</script>



 
於