經過python和websocket構建實時通訊系統[擴展saltstack監控]

先放一個小demo~

用html5的websocket實現的聊天平臺。後端用的是python bottle框架。

後期要改爲監控，可能要聯合saltstack作實時的監控。

像上篇博客說的那樣，實時監控就那點東西，就是接收數據、顯示數據 。

像下面這樣：

原文地址：http://rfyiamcool.blog.51cto.com/1030776/1269232

WebSocket API是下一代客戶端-服務器的異步通訊方法。該通訊取代了單個的TCP套接字，使用ws或wss協議，可用於任意的客戶端和服務器程序。WebSocket目前由W3C進行標準化。WebSocket已經受到Firefox 四、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，表示協議錯誤)，以關閉鏈接。

ws的鏈接狀態：

GET /chat HTTP/1.1
Upgrade: WebSocket
Connection: Upgrade
Host: 66.xiaorui.cc:10000
Origin: http://66.xiaorui.cc
Cookie: somenterCookie

簡單瞭解下接口方法和屬性：

• readyState表示鏈接有四種狀態：
  CONNECTING (0)：表示還沒創建鏈接；
  OPEN (1)： 已經創建鏈接，能夠進行通信；
  CLOSING (2)：經過關閉握手，正在關閉鏈接；
  CLOSED (3)：鏈接已經關閉或沒法打開；

• 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) {
    //產生異常
};

個人後端代碼：

python的後端實現websocket的處理，有不少方法的。

比較常見的是 gevent的websocket的方式。

from bottle import get, run, template
from bottle.ext.websocket import GeventWebSocketServer
from bottle.ext.websocket import websocket
import gevent
users = set()
@get('/')
def index():
    return template('index')
@get('/websocket', apply=[websocket])
def chat(ws):
    users.add(ws)
    while True:
        msg = ws.receive()
        if msg is not None:
            for u in users:
                print type(u)
                u.send(msg)
                print u,msg
        else: break
    users.remove(ws)
run(host='10.10.10.66', port=10000, server=GeventWebSocketServer)

後端的東西比較的簡單，就是把接收到的數據，原路打回去。。。

我前端的代碼

這個是鏈接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>

用來呈現結果的div

form id="send-message" class="form-inline">
        <input id="name" type="text" value="能夠更換名字">
        <input id="message" type="text" value="要扯淡的內容" />
       &nbsp; <button class="btn btn-success" type="submit">Send</button>
    </form>
    <div id="messages"></div>

這裏有個tornado後端的代碼，實現的過程和我差很少的~我須要的朋友能夠跑一下~

import logging
import os.path
import uuid
import tornado.httpserver
import tornado.ioloop
import tornado.options
import tornado.web
import tornado.websocket
def send_message(message):
    for handler in ChatSocketHandler.socket_handlers:
        try:
            handler.write_message(message)
        except:
            logging.error('Error sending message', exc_info=True)
class MainHandler(tornado.web.RequestHandler):
    def get(self):
        self.render('index.html')
class 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 = {
        'template_path': os.path.join(os.path.dirname(__file__), 'templates'),
        '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().start()
if __name__ == '__main__':
    main()

我和沈燦的對話~

沈燦和個人對話