WebSocket 詳解及應用示例

一、默認埠

WebSocket 是一種基於 TCP/IP 協議進行雙向通信的通信技術，它支持在 Web 應用程序和伺服器之間建立實時、雙向連接，並使數據能夠進行有效的推送。WebSocket 的默認埠是 80(http) 或 443(https)。

二、WebSocketDemo 介紹

WebSocketDemo 是一個簡單的示常式序，它演示了如何使用 WebSocket 實現一個基於瀏覽器的聊天室。在此示例中，客戶端和伺服器之間通過 WebSocket 建立了一個持久連接，使得用戶能夠在聊天室中實時交流。

WebSocketDemo 由兩個文件組成：server.py 和 index.html。其中，server.py 文件是 WebSocket 伺服器端程序代碼，index.html 文件是客戶端代碼。

三、WebSocketDemo 伺服器端

WebSocketDemo 伺服器端採用 Python 語言編寫，它使用了一個名為 Flask-SocketIO 的 Python 庫來創建一個基於 Flask 的 WebSocket 伺服器端。

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

app = Flask(__name__)
app.config['SECRET_KEY'] = 'secret!'
socketio = SocketIO(app)

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

@socketio.on('message')
def handleMessage(msg):
    print('Message: ' + msg)
    emit('response', msg, broadcast=True)

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

以上代碼中，我們首先導入了 Flask 庫和 Flask-SocketIO 庫。然後，我們創建了一個名為 app 的 Flask 應用程序實例，並配置了一個 SECRET_KEY。接下來，我們創建了一個名為 socketio 的 Flask-SocketIO 實例，並定義了一個名為 handleMessage 的事件處理函數。該函數會在客戶端向伺服器發送消息時被觸發，然後使用 emit() 方法將這個消息發送給所有已連接的客戶端。

四、WebSocketDemo 客戶端

在 WebSocketDemo 客戶端中，我們使用了一個名為 socket.io.js 的 JavaScript 庫來實現瀏覽器和伺服器之間的實時通信。我們在 index.html 中導入這個庫，並定義了一個名為 message 的事件處理函數。該函數會在用戶按下「發送」按鈕時被觸發，然後使用 emit() 方法將消息發送給伺服器。

<!DOCTYPE html>
<html>
<head>
    <title>WebSocket Demo</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script src="https://cdn.socket.io/socket.io-1.4.5.js"></script>
</head>
<body>
    <div class="container">
        <h1>WebSocket Demo</h1>
        <div class="row">
            <div class="col-md-6">
                <form>
                    <label>Message:</label>
                    <input type="text" class="form-control" id="message">
                    <br>
                    <button type="button" class="btn btn-primary" onclick="sendMessage()">Send</button>
                </form>
            </div>
            <div class="col-md-6">
                <div id="response"></div>
            </div>
        </div>
    </div>
    <script>
        var socket = io.connect('http://localhost:5000');
        socket.on('connect', function() {
            console.log('Connected to server');
        });
        function sendMessage() {
            var message = $('#message').val();
            socket.emit('message', message);
            $('#message').val('');
        }
        socket.on('response', function(msg) {
            $('#response').append('<p>' + msg + '</p>');
        });
    </script>
</body>
</html>

在以上代碼中，我們使用了 Bootstrap 和 jQuery 來實現客戶端界面。我們創建了一個文本框和發送按鈕，當用戶點擊發送按鈕時，sendMessage() 函數會被調用，該函數會將文本框中的內容發送到伺服器。

在我們使用的 JavaScript 庫中，我們使用了 io.connect() 方法來連接 WebSocket 伺服器，然後定義了一個名為 sendMessgae 的函數來將消息發送給伺服器。當伺服器接收到消息時，它會使用 emit() 方法將這個消息發送回客戶端，然後在客戶端中使用 on() 方法來處理這個響應並將其顯示在界面上。

五、WebSocket 的應用場景

WebSocket 技術具有許多應用場景，例如在線遊戲、實時聊天、股票行情等。在這些應用場景中，WebSocket 可以實現實時雙向通信，從而提高效率和用戶體驗。

其中，實時聊天是 WebSocket 常見的應用場景之一。利用 WebSocket 技術，我們可以在瀏覽器中實時聊天，而不需要刷新頁面。這種技術可以為用戶提供更加流暢、高效的聊天體驗。

另外，WebSocket 技術還可以用於在線協作。例如，在團隊協作中，我們可以利用 WebSocket 技術實現實時協作，從而提高協作效率和質量。

六、總結

WebSocket 技術是一種基於 TCP/IP 協議進行雙向通信的通信技術，它支持在 Web 應用程序和伺服器之間建立實時、雙向連接，並使數據能夠進行有效的推送。WebSocketDemo 是一個基於 Flask-SocketIO 實現的 WebSocket 示常式序，它演示了如何使用 WebSocket 實現一個基於瀏覽器的聊天室。該示常式序為我們了解和學習 WebSocket 技術提供了一個很好的實踐機會。

原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/293754.html