10 通過 python 和 websocket 構建實時通信係統[擴展 saltstack 監控]
Python實戰-從菜鳥到大牛的進階之路 作者：極客學院 投票推薦 加入書簽 留言反饋
先放一個小 demo~
用 html5 的 websocket 實現的聊天平台。後端用的是 python bottle 框架。
後期要改成監控，可能要聯合 saltstack 做實時的監控。
像上篇博客說的那樣，實時監控就那點東西，就是接收數據、顯示數據 。
像下麵這樣：
原文地址：http://rfyiamcool.blog.51cto/1030776/1269232
圖片 10.1 pic
websocket api 是下一代客戶端-服務器的異步通信方法。該通信取代了單個的 tcp 套接字，使用 ws 或 wss 協議，可用於任意的客戶端和服務器程序。
websocket 目前由 w3c 進行標準化。websocket 已經受到 firefox 4、chrome 、opera 10.70 以及 safari 5 等瀏覽器的支持。
websocket api最偉大之處在於服務器和客戶端可以在給定的時間範圍內的任意時刻，相互推送信息。websocket 並不限於以 ajax(或 xhr)方式通信，因為 ajax 技術需要客戶端發起請求，而 websocket 服務器和客戶端可以彼此相互推送信息；xhr 受到域的限製，而 websocket 允許跨域通信。
websocket 的優點
a)、服務器與客戶端之間交換的標頭信息很小，大概隻有 2 字節;
b)、客戶端與服務器都可以主動傳送數據給對方;
c)、不用頻率創建 tcp 請求及銷毀請求，減少網絡帶寬資源的占用，同時也節省服務器資源;
建立連接的握手 當 web 應用程序調用 new websocket(url)接口時，browser 就開始了與地址為 url 的 webserver 建立握手連接的過程。1. browser 與 websocket 服務器通過 tcp 三次握手建立連接，如果這個建立連接失敗，那麽後麵的過程就不會執行，web應用程序將收到錯誤消息通知。2. 在 tcp 建立連接成功後，browser/ua 通過 http 協議傳送 websocket 支持的版本號，協議的字版本號，原始地址，主機地址等等一些列字段給服務器端。3. websocket 服務器收到 browser/ua 發送來的握手請求後，如果數據包數據和格式正確，客戶端和服務器端的協議版本號匹配等等，就接受本次握手連接，並給出相應的數據回複，同樣回複的數據包也是采用 http 協議傳輸。4. browser 收到服務器回複的數據包後，如果數據包內容、格式都沒有問題的話，就表示本次連接成功，觸發 onopen 消息，此時 web 開發者就可以在此時通過 send 接口想服務器發送數據。否則，握手連接失敗，web 應用程序會收到 onerror 消息，並且能知道連接失敗的原因。這個握手很像 http，但是實際上卻不是，它允許服務器以 http 的方式解釋一部分 handshake 的請求，然後切換為 websocket數據傳輸webscoket 協議中，數據以幀序列的形式傳輸。考慮到數據安全性，客戶端向服務器傳輸的數據幀必須進行掩碼處理。服務器若接收到未經過掩碼處理的數據幀，則必須主動關閉連接。服務器向客戶端傳輸的數據幀一定不能進行掩碼處理。客戶端若接收到經過掩碼處理的數據幀，則必須主動關閉連接。針對上情況，發現錯誤的一方可向對方發送 close 幀(狀態碼是 1002，表示協議錯誤)，以關閉連接。 </pre>
圖片 10.2 pic
ws的連接狀態：
get /chat http/1.1upgrade: websocketconnection: upgradehost: 66.xiaorui:10000origin: http://66.xiaoruicookie: somentercookie </pre><h2>簡單了解下接口方法和屬性：</h2>
readystate 表示連接有四種狀態： <ul><li>connecting (0)：表示還沒建立連接；</li><li>open (1)： 已經建立連接，可以進行通訊；</li><li>closing (2)：通過關閉握手，正在關閉連接；</li><li>closed (3)：連接已經關閉或無法打開；</li></ul>
url 是代表 websocket 服務器的網絡地址，協議通常是”ws”或“wss(加密通信)”,send 方法就是發送數據到服務器端；
close 方法就是關閉連接；
onopen 連接建立，即握手成功觸發的事件；
onmessage 收到服務器消息時觸發的事件；
onerror 異常觸發的事件；
onclose 關閉連接觸發的事件；
來個例子，咱們用 js 來搞搞
var wsserver = \''ws://localhost:8888/demo\''; //服務器地址var websocket = new websocket(wsserver); //創建 websocket 對象websocket.send("hello");//向服務器發送消息alert(websocket.readystate);//查看 websocket 當前狀態websocket.onopen = function (evt) { //已經建立連接};websocket.onclose = function (evt) { //已經關閉連接};websocket.onmessage = function (evt) { //收到服務器消息，使用 evt.data 提取};websocket.onerror = function (evt) { //產生異常}; </pre>
我的後端代碼：
python 的後端實現 websocket 的處理，有很多方法的。
比較常見的是 gevent 的 websocket 的方式。
from bottle import get, run, temtefrom bottle.ext.websocket import geventwebsocketserverfrom bottle.ext.websocket import websocketimport geventusers = set@get(\''/\'')def index: return temte(\''index\'')@get(\''/websocket\'', apply=[websocket])def chat(ws): users.add(ws) while true:msg = ws.receiveif msg is not none: for u in users:print type(u)u.send(msg)print u,msgelse: break users.remove(ws)run(host=\''10.10.10.66\'', port=10000, server=geventwebsocketserver) </pre>
後端的東西比較的簡單，就是把接收到的數據，原路打回去。。。
我前端的代碼
這個是連接 webscoket，然後接收和發數據的 js
<script>$(document).ready(function { if (!window.websocket) {if (window.mozwebsocket) { window.websocket = window.mozwebsocket;} else { $(\''#messages\'').append("<li>your browser doesn\''t support websockets.</li>");} } ws = new websocket(\''ws://10.10.10.66:10000/websocket\''); ws.onopen = function(evt) {$(\''#messages\'').append(\''<li>connected to chat.</li>\''); } ws.onmessage = function(evt) {$(\''#messages\'').append(\''<li>\'' + evt.data + \''</li>\''); } $(\''#send-message\'').submit(function {ws.send($(\''#name\'').val + ": " + $(\''#message\'').val);$(\''#message\'').val(\''\'').focus;return false; });}); </script> </pre>
用來呈現結果的 p
form id="send-message" ss="form-inline"><input id="name" type="text" value="可以更換名字"><input id="message" type="text" value="要扯淡的內容" /> <button ss="btn btn-sess" type="submit">send</button> </form>
</pre>
這裏有個 tornado 後端的代碼，實現的過程和我差不多的~我需要的朋友可以跑一下~
import loggingimport os.pathimport uuidimport tornado.httpserverimport tornado.ioloopimport tornado.optionsimport tornado.webimport tornado.websocketdef send_message(message): for handler in chatsockethandler.socket_handlers:try: handler.write_message(message)except: logging.error(\''error sending message\'', exc_info=true)ss mainhandler(tornado.web.requesthandler): def get(self):self.render(\''index.html\'')ss chatsockethandler(tornado.websocket.websockethandler): socket_handlers = set def open(self):chatsockethandler.socket_handlers.add(self)send_message(\''a new user has entered the chat room.\'') def on_close(self):chatsockethandler.socket_handlers.remove(self)send_message(\''a user has left the chat room.\'') def on_message(self, message):send_message(message)def main: settings = {\''temte_path\'': os.path.join(os.path.dirname(__file__), \''temtes\''),\''static_path\'': os.path.join(os.path.dirname(__file__), \''static\'') } application = tornado.web.application([(\''/\'', mainhandler),(\''/new-msg/\'', chathandler),(\''/new-msg/socket\'', chatsockethandler) ], **settings) http_server = tornado.httpserver.httpserver(application) http_server.listen(8000) tornado.ioloop.ioloop.instance.startif __name__ == \''__main__\'': main </pre>
我和沈燦的對話~
圖片 10.3 pic
沈燦和我的對話
圖片 10.4 pic
本文出自 “峰雲，就她了。” 博客，謝絕轉載！
用 html5 的 websocket 實現的聊天平台。後端用的是 python bottle 框架。
後期要改成監控，可能要聯合 saltstack 做實時的監控。
像上篇博客說的那樣，實時監控就那點東西，就是接收數據、顯示數據 。
像下麵這樣：
原文地址：http://rfyiamcool.blog.51cto/1030776/1269232
圖片 10.1 pic
websocket api 是下一代客戶端-服務器的異步通信方法。該通信取代了單個的 tcp 套接字，使用 ws 或 wss 協議，可用於任意的客戶端和服務器程序。
websocket 目前由 w3c 進行標準化。websocket 已經受到 firefox 4、chrome 、opera 10.70 以及 safari 5 等瀏覽器的支持。
websocket api最偉大之處在於服務器和客戶端可以在給定的時間範圍內的任意時刻，相互推送信息。websocket 並不限於以 ajax(或 xhr)方式通信，因為 ajax 技術需要客戶端發起請求，而 websocket 服務器和客戶端可以彼此相互推送信息；xhr 受到域的限製，而 websocket 允許跨域通信。
websocket 的優點
a)、服務器與客戶端之間交換的標頭信息很小，大概隻有 2 字節;
b)、客戶端與服務器都可以主動傳送數據給對方;
c)、不用頻率創建 tcp 請求及銷毀請求，減少網絡帶寬資源的占用，同時也節省服務器資源;
建立連接的握手 當 web 應用程序調用 new websocket(url)接口時，browser 就開始了與地址為 url 的 webserver 建立握手連接的過程。1. browser 與 websocket 服務器通過 tcp 三次握手建立連接，如果這個建立連接失敗，那麽後麵的過程就不會執行，web應用程序將收到錯誤消息通知。2. 在 tcp 建立連接成功後，browser/ua 通過 http 協議傳送 websocket 支持的版本號，協議的字版本號，原始地址，主機地址等等一些列字段給服務器端。3. websocket 服務器收到 browser/ua 發送來的握手請求後，如果數據包數據和格式正確，客戶端和服務器端的協議版本號匹配等等，就接受本次握手連接，並給出相應的數據回複，同樣回複的數據包也是采用 http 協議傳輸。4. browser 收到服務器回複的數據包後，如果數據包內容、格式都沒有問題的話，就表示本次連接成功，觸發 onopen 消息，此時 web 開發者就可以在此時通過 send 接口想服務器發送數據。否則，握手連接失敗，web 應用程序會收到 onerror 消息，並且能知道連接失敗的原因。這個握手很像 http，但是實際上卻不是，它允許服務器以 http 的方式解釋一部分 handshake 的請求，然後切換為 websocket數據傳輸webscoket 協議中，數據以幀序列的形式傳輸。考慮到數據安全性，客戶端向服務器傳輸的數據幀必須進行掩碼處理。服務器若接收到未經過掩碼處理的數據幀，則必須主動關閉連接。服務器向客戶端傳輸的數據幀一定不能進行掩碼處理。客戶端若接收到經過掩碼處理的數據幀，則必須主動關閉連接。針對上情況，發現錯誤的一方可向對方發送 close 幀(狀態碼是 1002，表示協議錯誤)，以關閉連接。 </pre>
圖片 10.2 pic
ws的連接狀態：
get /chat http/1.1upgrade: websocketconnection: upgradehost: 66.xiaorui:10000origin: http://66.xiaoruicookie: somentercookie </pre><h2>簡單了解下接口方法和屬性：</h2>
readystate 表示連接有四種狀態： <ul><li>connecting (0)：表示還沒建立連接；</li><li>open (1)： 已經建立連接，可以進行通訊；</li><li>closing (2)：通過關閉握手，正在關閉連接；</li><li>closed (3)：連接已經關閉或無法打開；</li></ul>
url 是代表 websocket 服務器的網絡地址，協議通常是”ws”或“wss(加密通信)”,send 方法就是發送數據到服務器端；
close 方法就是關閉連接；
onopen 連接建立，即握手成功觸發的事件；
onmessage 收到服務器消息時觸發的事件；
onerror 異常觸發的事件；
onclose 關閉連接觸發的事件；
來個例子，咱們用 js 來搞搞
var wsserver = \''ws://localhost:8888/demo\''; //服務器地址var websocket = new websocket(wsserver); //創建 websocket 對象websocket.send("hello");//向服務器發送消息alert(websocket.readystate);//查看 websocket 當前狀態websocket.onopen = function (evt) { //已經建立連接};websocket.onclose = function (evt) { //已經關閉連接};websocket.onmessage = function (evt) { //收到服務器消息，使用 evt.data 提取};websocket.onerror = function (evt) { //產生異常}; </pre>
我的後端代碼：
python 的後端實現 websocket 的處理，有很多方法的。
比較常見的是 gevent 的 websocket 的方式。
from bottle import get, run, temtefrom bottle.ext.websocket import geventwebsocketserverfrom bottle.ext.websocket import websocketimport geventusers = set@get(\''/\'')def index: return temte(\''index\'')@get(\''/websocket\'', apply=[websocket])def chat(ws): users.add(ws) while true:msg = ws.receiveif msg is not none: for u in users:print type(u)u.send(msg)print u,msgelse: break users.remove(ws)run(host=\''10.10.10.66\'', port=10000, server=geventwebsocketserver) </pre>
後端的東西比較的簡單，就是把接收到的數據，原路打回去。。。
我前端的代碼
這個是連接 webscoket，然後接收和發數據的 js
<script>$(document).ready(function { if (!window.websocket) {if (window.mozwebsocket) { window.websocket = window.mozwebsocket;} else { $(\''#messages\'').append("<li>your browser doesn\''t support websockets.</li>");} } ws = new websocket(\''ws://10.10.10.66:10000/websocket\''); ws.onopen = function(evt) {$(\''#messages\'').append(\''<li>connected to chat.</li>\''); } ws.onmessage = function(evt) {$(\''#messages\'').append(\''<li>\'' + evt.data + \''</li>\''); } $(\''#send-message\'').submit(function {ws.send($(\''#name\'').val + ": " + $(\''#message\'').val);$(\''#message\'').val(\''\'').focus;return false; });}); </script> </pre>
用來呈現結果的 p
form id="send-message" ss="form-inline"><input id="name" type="text" value="可以更換名字"><input id="message" type="text" value="要扯淡的內容" /> <button ss="btn btn-sess" type="submit">send</button> </form>
</pre>
這裏有個 tornado 後端的代碼，實現的過程和我差不多的~我需要的朋友可以跑一下~
import loggingimport os.pathimport uuidimport tornado.httpserverimport tornado.ioloopimport tornado.optionsimport tornado.webimport tornado.websocketdef send_message(message): for handler in chatsockethandler.socket_handlers:try: handler.write_message(message)except: logging.error(\''error sending message\'', exc_info=true)ss mainhandler(tornado.web.requesthandler): def get(self):self.render(\''index.html\'')ss chatsockethandler(tornado.websocket.websockethandler): socket_handlers = set def open(self):chatsockethandler.socket_handlers.add(self)send_message(\''a new user has entered the chat room.\'') def on_close(self):chatsockethandler.socket_handlers.remove(self)send_message(\''a user has left the chat room.\'') def on_message(self, message):send_message(message)def main: settings = {\''temte_path\'': os.path.join(os.path.dirname(__file__), \''temtes\''),\''static_path\'': os.path.join(os.path.dirname(__file__), \''static\'') } application = tornado.web.application([(\''/\'', mainhandler),(\''/new-msg/\'', chathandler),(\''/new-msg/socket\'', chatsockethandler) ], **settings) http_server = tornado.httpserver.httpserver(application) http_server.listen(8000) tornado.ioloop.ioloop.instance.startif __name__ == \''__main__\'': main </pre>
我和沈燦的對話~
圖片 10.3 pic
沈燦和我的對話
圖片 10.4 pic
本文出自 “峰雲，就她了。” 博客，謝絕轉載！