swoole 的練習 demo（1）

一直不能下決心好好學習，仔細研究一下，決定用盡量降低難度曲線的方法，從易到難，一步一步的學習，所以整了個demo專案。

git倉庫

git clone https://github.com/lang123789/swoole_demo.git
然後設定了標籤，本文對應 v1.0
cd swoole_demo
git checkout v1.0

有提示錯誤之類，但程式碼已經切換到 v1.0 了。
然後需要自己配置好本地的 nginx ，這樣才能用瀏覽器訪問。

需求

1、寫一個html靜態頁面，帶樣式，帶js函式可以把使用者輸入的話顯示在對話列表。

測試網址

127.0.0.1/index.html

主要程式碼

function my_message_html(incoming_message) {
    var newMessage = '<div class="me-wrapper">' +
        '<div class="me-message container">' + incoming_message + '</div>' +
        '<div class="me-avatar">' +
        '我自己' +
        '</div></div>';
  return newMessage;
}

function chatter_message_html(incoming_message) {
    var newMessage = '<div class="current-chatter-wrapper">' +
        '<div class="chatter-avatar">' +
        '管理員' +
        '</div>' +
        '<div class="chatter-message container">' + incoming_message + '</div>' +
        '</div>';
  return newMessage;
}

function update_chatWindow(incoming_message, from) {
    if (from === 1) {
        var msg_html = my_message_html(incoming_message);
  } else if (from === 0) {
        var msg_html = chatter_message_html(incoming_message);
  }
    $(".chat-window").append(msg_html);
}

程式碼說明

本文的程式碼其實與 websocket 沒關係，只需建立一個有 js 的 html 頁面，能點選按鈕，假裝傳送訊息即可。

本作品採用《CC 協議》，轉載必須註明作者和本文連結