websocket搭建簡單的網頁聊天室框架

http協議，是客戶端每發送一個request，服務器返回一個response，沒法作到服務器主動向客戶端發送數據。咱們要作一個網頁版的聊天室，當一我的發送了消息時，其餘人怎麼能看到這條信息呢？有一個作法就是在網頁中不斷的運行js，發送request給服務器，服務器不斷返回response，當有新的消息時顯示在頁面上。這樣作毫無疑問會產生大量的http鏈接，對服務器的性能和帶寬都有影響。而websocket協議能夠作到由服務器主動向客戶端發送數據，當有新消息時就主動發送給瀏覽器，瀏覽器將內容更新到頁面上。更多關於這個協議的詳細內容和介紹，能夠網上自行搜索。

---

爲了學習websocket，咱們來實現一個超級簡單的網頁聊天室，創建一個html文件，頁面顯示效果以下，用一個大的div框架用來顯示聊天記錄，一個input輸入內容，一個button用於發送信息：

前端使用js的socket.io，代碼以下：

<script type="text/javascript" src="https://cdn.bootcss.com/socket.io/1.7.4/socket.io.min.js"></script>
<script type="text/javascript" charset="utf-8">
    var socket = io.connect('http://' + document.domain + ':' + location.port);
    var send = function () {
        var msg = document.querySelector("input").value;
        socket.emit('my event', {data: msg});
    };
    socket.on('res', function (msg) {
        document.querySelector(".content").insertAdjacentHTML(
            "beforeend",
            "<div class='message-div'><span class='message-content'>" + msg.data + "</span></div>"
        )
    })
</script>

上段代碼首先使用cdn引用socket.io.min.js，而後與後端創建鏈接，接着定義了一個send方法（在html的button中使用onclikc綁定），該方法首先獲取input中的內容，而後使用emit方法將其發送到後端，後端(python+Flask-SocketIO)對應的代碼是：

from flask import Flask, render_template
from flask_socketio import SocketIO
import config


app = Flask(__name__)
app.config.from_object(config)
socketio = SocketIO(app)


@app.route('/')
def index():
    return render_template('websocket.html')


@socketio.on('my event')
def handle_my_custom_namespace_event(data):
    socketio.emit("res", data)


if __name__ == "__main__":
    socketio.run(app)

代碼中使用@socketio.on('my event')註冊一個my event事件（與前端socket.emit('my event', {data: msg})一致），而後再使用socketio.emit("res", data)將數據返回前端，前端又經過socket.on('res', callback)進行接收，全部創建了webscoket鏈接的客戶端都會收到。此時整個流程就已經很明確了，再梳理一遍就是：點擊button後，觸發send函數，獲取到input中的內容，而後將數據（準確來講是將攜帶數據的事件）發送給後端，後端對應這個事件的函數（即便用@socketio.on('my event')註冊的函數，相似路由的註冊）就會執行，該後端函數向前端發送攜帶一樣數據的res事件，前端socket.on('res', callback)收到'req'事件後，使用callback回調函數處理（即向網頁中添加內容）。

---

開兩個瀏覽器窗口，就能夠看出效果了，以下：