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>