php – WebSocket 架設

安裝套件

我們使用 Ratchet 這款 PHP WebSocket 架設。使用這款套件是不需要安裝其他元件,安裝執行比較簡單,但我後來推薦使用 Swoole 這個效能很好的 PHP 擴展,Swoole 在一開始安裝上稍微麻煩一點,但在後續使用上會簡單許多。以下介紹 Ratchet 的安裝方式:

我們使用 composer.json 安裝,先建立 /composer.json

雖然官方範例使用 psr-0 較舊的規範,不過不會影響我們的範例。接著運行指令下載

建立應用程式 (Application)

在 /src/MyApp/Chat.php 建立這個官方範例

結構上會是這樣

實體化

Chat.php 是我們應用程式的類別,我們需要將它實體化運行。在 /bin/chat-server.php 加入

我們建立個一個輸入/輸出的服務類別,並告訴伺服器運行的事件要不斷循環,並監聽 Port 8080 的任何請求。我們打開 terminal ,來到跟目錄底下運行

這就我們的程式已經開始執行監聽了。

開始溝通

首先,我們建立 2 個 HTML 來示範。/index.html 與 /send.html。

index.html

打開網址 http://localhost/index.html 在 Console 的地方會看到連線已經建立

然後可以看看 terminal 出現了新連線的提示、還有接收到什麼訊息

接著 send.html 寫入

打開網址 http://localhost/send.html 在 Console 的地方會一樣會看到連線已經建立。

回到 index.html 會發現 Console 出現接收到的字串

不論重新整理 index.html 或 send.html 都能再另外一方接收到傳遞訊息。我們可以看到連線狀態都保持 websocket 的連線。

影片示範

jQuery – 全部選取表單的 checkbox

可使使用這個套件 jquery-checkall

1. 這是你要控制所有 checkbox 的何選鈕

2. 為每個要控制的 checkbox 添加如 class

3. jQuery 這麼寫

其他的可以參考官方範例囉

javascript – 去除圖片編碼後的開頭 data:image

假設圖片編碼開頭是這樣

如果要把開頭的 data:image/jpeg;base64, 去除掉,可以使用 replace 這麼做

 

Vue – 如何使用作用域插槽 (Scoped Slots) 分割元件版面並餵入不同資料

這次我們示範要如何使用 slot 去製作分割組件。我希望呈現

  • <header> + <main>
  • <main> 包含了標題與三篇文章
  • 三篇文章是從伺服器取得資料

影片教學

文字教學如下

1、建立 container 並加入第一個整體架構的組件

2、在父組件中,建立一個子組件,子組件有自己的樣式

這是父組件的框架 + 子組件的內容樣式

3、父組件,建立準備分派到子組件的內容,也就是一個模版

4. 在子組件,建立插槽 slot 的擺放位置

5. 在子組件建立 JSON 資料,例如透過 AJAX 遠端取得。

6. 修改子組件,讓插槽使用 for loop 逐一取出每筆資料

7、最後完成

Vue – 如何理解「使用 slot 分發內容」

關於 slot (插槽) 的範例說明,在官方網站並不是介紹得很清楚(參考)。標題「使用 slot 分發內容」這句話其實不易理解,但意思就是說「父組件準備好內容,分發給子組件安排的結構」。父組件只負責內容,但不負責擺放的位置;子組件負責擺放位置,但不理會內容是什麼

  • 內容就是長相
    • 例如你要呈現的 <header><main><div>文字…長怎麼樣
    • 像是眼睛會有眼睫毛、眼皮、眼珠子。
    • 當然也可以把眼睛再拆分更細的組件,就看需求了。
  • 結構就是擺哪裡
    • 例如你的 <header> 要把在 <main> 的前面或後面?
    • 像是眼睛要擺在鼻子上方,嘴要放在鼻子下方。

這裡我依序擴增的步驟來教學。

步驟一、建立 Vue 初始位置,並加入組件

步驟二、加入父組件

加入 <c-container> 組件,告知使用 #element 模板

步驟三、在父模版中,用子組件包圍內容

這時候會輸出

目前有 <c-struct> 是因為我們還沒有指派子組件。

步驟四、加入子組件

  • <c-struct> 組件,告知使用 #container 模板
  • 指定 header 對應插槽(slot)的名稱

因為設定了子組件 c-struct,所以目前存檔的畫面會變空白。因為模版 #container 我們還沒有寫內容,template#element > c-struct 會被丟棄。

步驟五、子組件加入 <slot> 擺放位置

會輸出

我們會發現 .container出現了,.container 底下也將 <slot name=”header”> 替換為 <heade>。

步驟六、添加其他 slot 插槽位置與對應內容

會輸出

為什麼會先出現 <main> 再出現 <footer> 呢?因為我們在子組件 (c-struct) 指定的模版 (template#container) ,插槽依序排列為 <slot name=”header”>、<slot name=”main”>、<slot name=”footer”>。所以一旦我們改變 <slot> 的位置,呈現的順序也就跟著不同囉。

如果不指定 <slot> 的 name 會怎麼樣?

若子組件的模版只有 <slot>,那就會把父組件模版中沒有指定 slot 屬性的元素,收集起來替換掉 <slot> 的位置。

會輸出

如果有散落的元素內容,但子組件模版中沒有 <slot> 會如何?

那內容就會被丟棄,不會顯示囉!會輸出

附上完整範例