python服务端
import threading
from SimpleWebSocketServer import SimpleWebSocketServer
from SimpleWebSocketServer.SimpleWebSocketServer import WebSocket
from main import logger
'''
used by wsClient to obtain the elevState update and dispatch update
'''
clients = []
class ElevWSHandler(WebSocket):
@staticmethod
def init(logger):
ElevWSHandler._logger = logger
def handleMessage(self):
ElevWSHandler._logger.info(self.data)
def handleConnected(self):
clients.append(self)
ElevWSHandler._logger.warn("------------------------------------------------------------")
ElevWSHandler._logger.warn("{} WS: 1 wsClient connected, total:{}".format(self.address, len(clients)))
def handleClose(self):
ElevWSHandler._logger.warn("---------------------------------------")
ElevWSHandler._logger.warn("{} channel closed".format(self.address))
clients.remove(self)
class ElevWSServer(threading.Thread):
def __init__(self, port, logger):
threading.Thread.__init__(self, name="ElevWSServer")
self.port = port
self.logger = logger
def run(self):
server = SimpleWebSocketServer('', self.port, ElevWSHandler, selectInterval=1)
self.logger.warn("------------------------------------------------------")
self.logger.warn("WebSocket Server listening on :{}".format(self.port))
self.logger.warn("------------------------------------------------------")
server.serveforever()
if __name__ == '__main__':
ElevWSHandler.init(logger)
elevWSServer = ElevWSServer(8000, logger).start()
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>web test</title>
<script type="text/javascript" src="../static/js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="../static/js/index.js"></script>
</head>
<body>
<div>hello ws</div>
<div style="display:block">
<div id="output" ></div>
<form name="myform">
<p>
<textarea name="outputtext" id="outputtext" rows="30" cols="180"></textarea>
</p>
<p>
<textarea name="inputtext" cols="50"></textarea>
</p>
<p>
<textarea name="url" cols="50"></textarea>
</p>
<p>
<input type="button" name=sendButton value="Send" onClick="sendText();">
<input type="button" name=clearButton value="Clear" onClick="clearText();">
<input type="button" name=disconnectButton value="Disconnect" onClick="doDisconnect();">
<input type="button" id="connectBtn" name=connectButton value="Connect" onClick="doConnect();">
</p>
</form>
</div>
<script type="text/javascript">
$(function () {
index();
})
console.log('index-----------------')
</script>
<script type="text/javascript" src="../static/js/webSoketTest.js"></script>
</body>
</html>
js
var websocket;
var connected = false
function init() {
document.myform.url.value = "ws://localhost:8000/"
document.myform.inputtext.value = "Hello World!"
doConnect()
}
function doDisconnect() {
websocket.close();
}
function onMessage(evt) {
writeToScreen("packet: " + evt.data + '\n');
var jsonObj = JSON.parse(evt.data);
if (jsonObj == undefined) {
return
}
if (jsonObj.Command == 'FORWARD_ELEV_INFO') {
var dirSrc = (jsonObj.Direction == 0 ? "images/nothing.png" : jsonObj.Direction == 1 ? "images/up.png" : "images/down.png");
var dirText = (jsonObj.Direction == 0 ? "STOP" : (jsonObj.Direction == 1 ? "UP" : "DOWN"))
var doorOpen = (jsonObj.DoorState == 1);
var doorText = (jsonObj.DoorState == 1 ? "OPEN" : "CLOSE")
var prefix = doorOpen ? "[" : ""
var suffix = doorOpen ? "]" : ""
if (jsonObj.ElevId == 1) {
logE(jsonObj.ElevId, "E" + jsonObj.ElevId + " " + jsonObj.CurFloor + "F." + dirText + " " + doorText)
$$("floorA").innerHTML = prefix + jsonObj.CurFloor + suffix
$$("dirA").src = dirSrc
} else {
$$("floorB").innerHTML = prefix + jsonObj.CurFloor + suffix
$$("dirB").src = dirSrc
}
} else if (jsonObj.c == 'INIT') {
initGroups(jsonObj)
} else if (jsonObj.c == 'ADD_USER') {
addUser(jsonObj)
} else if (jsonObj.c == 'E_ARRIVAL') {
elevArrival(jsonObj)
} else if (jsonObj.c == 'E_LEFT') {
elevLeft(jsonObj)
} else if (jsonObj.c == 'G_ATTACHED') {
groupAttached(jsonObj)
}
}
function onOpen(evt) {
writeToScreen("connected\n");
connected = true
$("#dirA").show()
$("#dirB").show()
document.myform.connectButton.disabled = true;
document.myform.disconnectButton.disabled = false;
}
function onClose(evt) {
writeToScreen("disconnected\n");
connected = false
$("#dirA").hide()
$("#dirB").hide()
document.myform.connectButton.disabled = false;
document.myform.disconnectButton.disabled = true;
}
function onError(evt) {
if (evt.data != undefined) {
writeToScreen('error: ' + evt.data + '\n');
} else {
writeToScreen('unknown error occurred \n');
}
try {
websocket.close();
} catch (e) {
console.error(e)
}
document.myform.connectButton.disabled = false;
document.myform.disconnectButton.disabled = true;
}
function doSend(message) {
writeToScreen("sent: " + message + '\n');
websocket.send(message);
}
function writeToScreen(message) {
document.myform.outputtext.value += message
document.myform.outputtext.scrollTop = document.myform.outputtext.scrollHeight;
}
function sendText() {
doSend(document.myform.inputtext.value);
}
function clearText() {
document.myform.outputtext.value = "";
if (clearDebugAfterBroken) {
document.myform.outputtext.value = "";
}
}
function $$(id) {
return document.getElementById(id)
}
function doConnect() {
if (!connected) {
var url = document.myform.url.value;
writeToScreen("connecting to " + url + "\n")
try {
websocket = new WebSocket(url);
websocket.onerror = function (evt) {
onError(evt)
};
websocket.onopen = function (evt) {
onOpen(evt)
};
websocket.onclose = function (evt) {
onClose(evt)
};
websocket.onmessage = function (evt) {
onMessage(evt)
};
} catch (e) {
console.log(e)
}
}
}
window.addEventListener("load", init, false);
前端效果图
后端接受数据
