精簡websocket交互示例

示例說明

​ 本例爲websocket的精簡交互示例,服務端代碼採用python,客戶端代碼採用html5,演示websocket的精簡交互過程。

服務代碼

​ 採用python3來實現,採用websockets庫,庫安裝命令pip install websockets

​ 參考文章:https://blog.csdn.net/qq_24822271/article/details/90229267。

​ 對應代碼如下。

# 需提前安裝庫"pip install websockets"

import websockets
import asyncio

class WSserver():
    async def handle(self,websocket,path):
        recv_msg = await websocket.recv()
        print("i received %s" %recv_msg)
        await websocket.send('server send ok')
    def run(self):
        ser = websockets.serve(self.handle,"0.0.0.0","8240")
        asyncio.get_event_loop().run_until_complete(ser)
        asyncio.get_event_loop().run_forever()

ws = WSserver()
ws.run()
前端代碼

​ 採用html5實現,使用了h5的websocket特性。

​ 參考文章:https://www.runoob.com/html/html5-websocket.html。

​ 對應代碼如下。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Websocket測試</title>
    <script type="text/javascript">
        //對應服務端代碼爲本地的,websocket.py
        function WebSocketTest()
        {
            if (!("WebSocket" in window))
            {
                alert("瀏覽器不支持websocket");
                reuturn;
            }
            
            //打開websocket
            var ws = new WebSocket("ws://localhost:8240");
            ws.onopen = function()
            {
                ws.send("發送數據");
                alert("數據發送中...");
            };

            ws.onmessage=function(evt)
            {
                var received_msg = evt.data;
                alert("數據已接收...");
            };

            ws.onclose = function()
            {
                alert("連接已關閉...");
            };
        }
    </script>
</head>
<body>
    <div id="sse">
        <a href="javascript:WebSocketTest()">運行WebSocket</a>
    </div>
</body>
</html>

運行效果

​ 前端會彈出發送中、已接收、已關閉等對話框,服務端會輸出received消息。若實現前端與其他語言如c++、C#、java等端的交互,則服務端採用對應語言實現即可。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章