基礎設定實作

我們把剛剛提到的基礎設定放進nginx，並用docker跑起來實驗看看

直接修改 nginx.vh.default.conf 並加入

location = /sub {
    nchan_subscriber;
    nchan_channel_id $arg_id;
}

location = /pub {
    nchan_publisher;
    nchan_channel_id $arg_id;
}

準備一個可以用WebSocket訂閱的簡單html

<!DOCTYPE html>
    <meta charset="utf-8" />
    <title>WebSocket Test</title>
    <script language="javascript" type="text/javascript">
        var output;
            function init() {
                output = document.getElementById("output");
                testWebSocket();
            }
            function testWebSocket() {
                var url = document.getElementById("url");
                var channelId = document.getElementById("channelID");
                var fullUrl = "ws://" + url.value + "/sub?id=" + channelId.value;
                websocket = new WebSocket(fullUrl);
                websocket.onopen = function(evt) {
                    onOpen(evt)
                    };
                websocket.onclose = function(evt) {
                    onClose(evt)
                };
                websocket.onmessage = function(evt) {
                    onMessage(evt)
                };
                websocket.onerror = function(evt) {
                    onError(evt)
                };
            }
            function onOpen(evt) {
                writeToScreen("CONNECTED");
            }
            function onClose(evt) {
                writeToScreen("DISCONNECTED");
            }
            function onMessage(evt) {
                writeToScreen('RESPONSE: ' + evt.data+'');
            }
            function onError(evt) {
                writeToScreen('ERROR: ' + evt.data);
            }
            function writeToScreen(message) {
                var pre = document.createElement("p"); pre.style.wordWrap = "break-word"; pre.innerHTML = message; output.appendChild(pre);
            }
        </script>
        <h2>WebSocket Test</h2>

連線位置：<input type="text" id="url">
<br><br>
Channel ID：<input type="text" id="channelID">
<br><br>
<button id="connect" onClick="init()">連線</button>
        <div id="output"></div>

重新run docker並覆蓋設定與index.html

$ docker run -p 80:80 -v $(pwd)/nginx.vh.default.conf:/etc/nginx/conf.d/default.conf -v $(pwd)/index.html:/usr/share/nginx/html/index.html herb123456/nchan-alpine

注意 $(pwd) 可以換成自己的絕對路徑

在網址列上輸入自己ip

如果是本機則輸入127.0.0.1或localhsot即可看到以下畫面

在連線位置上打自己的ip

channel id則可以任意輸入

之後按連線

如果成功則會看到 CONNECTED

這時候只需要對這個channel id發送POS請求即可傳送訊息

 $ curl --request POST --data "test" "http://172.105.204.205/pub?id=abcd"
queued messages: 1
last requested: 99 sec. ago
active subscribers: 1
last message id: 1521967261:0

頁面上也會同步出現剛剛打的訊息 test

Previous基礎設定 Next頻道 Channel ID

Last updated 6 years ago