示例說明
本例爲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等端的交互,則服務端採用對應語言實現即可。