初試WebSocket構建聊天程序

時間 2019-11-24

標籤初試 websocket 構建聊天程序简体版

原文原文鏈接

上一篇文章中使用了Ajax long polling實現了一個簡單的聊天程序，對於web實時通訊，今天就來試用一下基於WebSocket的長鏈接方式。html

WebSocket簡介

爲了加強web通訊的功能，在HTML5中，提供了WebSocket，它不單單是一種web通訊方式，也是一種應用層協議。web

WebSocket提供了客戶端和服務端之間的雙全工跨域通訊，經過客戶端和服務端之間創建WebSocket鏈接（其實是TCP鏈接，後面會看到），在同一時刻可以實現客戶端到服務器和服務器到客戶端的數據發送。跨域

Ajax long polling是一種客戶端去服務端拉取數據的方式，而WebSocket則能真正實現服務端主動向客戶端推送數據。下圖形象的展現了WebSocket的工做方式。瀏覽器

對於WebSocket這種新的應用層協議，在實現應用的時候，客戶端和服務端都須要遵循WebSocket協議，關於更多的WebSocket內容，請參考websocket.org。服務器

實現

首先，仍是先看看經過WebSocket實現的聊天程序的代碼以及效果，而後再看WebSocket工做方式相關的內容。websocket

客戶端

由於並非全部版本的瀏覽器都可以支持WebSocket，因此例子中經過下面代碼來檢測當前瀏覽器是否支持WebSocket。app

if(window.WebSocket){
    //support WebSocket, more code here
}
else{
    alert("WebSocket was not supported");
}

對於客戶端，主要就是updater這個對象，該對象會建立並維護了一個WebSocket對象，經過這個WebSocket對象就能夠跟服務端進行交互（收取或發送消息）。socket

var updater = {
     socket: null,

     start: function() {
         var url = "ws://" + location.host + "/chatsocket";
         updater.socket = new WebSocket(url);
         
         updater.socket.onopen = function(event) {
         }
         
         updater.socket.onclose = function(event) {
             alert("server socket closed");
         }
         
         updater.socket.onmessage = function(event) {
             updater.showMessage(event.data);
         }
     },

     showMessage: function(message) {
         console.log(message);
         $("#inbox").append(message);
         $("#message").val("");
     }
 };

服務端

對於服務端，此次使用了gevent-websocket這個庫，能夠很方便的經過pip進行安裝。url

服務端經過MessageBuffer這個類來管理全部的消息，以及全部的WebSocket client。因爲WebSocket是一種長鏈接的方式，因此能夠很容易的統計出當前在線的client的數量。spa

class MessageBuffer(object):
    def __init__(self, cache_size = 200):
        self.cache = []
        self.cache_size = cache_size
        self.clients = []        

    def new_message(self, msg):
        self.cache.append(msg)
        if len(self.cache) > self.cache_size:
            self.cache = self.cache[-self.cache_size:]
            
    def update_clients(self, msg):
        for client in self.clients:
            client.send(msg)

跟上次相比，使用WebSocket以後，服務器代碼更加簡潔了。當客戶端發起"/chatsocket"請求後，服務器就會跟客戶端創建鏈接，並將客戶端加入"messageBuffer.clients"列表中；當客戶端斷開鏈接，就會將客戶端從"messageBuffer.clients"列表中移除。

當服務器收到新消息後，就會經過"messageBuffer.update_clients"方法，將新消息推送到全部的客戶端。

def application(env, start_response):
    # visit the main page
    if env['PATH_INFO'] == '/':
        # some code to load main page here
    
    elif env['PATH_INFO'] == '/chatsocket':
        ws = env["wsgi.websocket"]
        messageBuffer.clients.append(ws)
        print "new client join, total client count %d" %len(messageBuffer.clients)
        while True:
            message = ws.receive()
            if message is None:
                messageBuffer.clients.remove(ws)
                print "client leave, total client count %d" %len(messageBuffer.clients)
                break
            print "Got message: %s" %message
            message = "<div>{0}</div>".format(message)
            messageBuffer.new_message(message)
            messageBuffer.update_clients(message)