網路上WebSocket教學看了很多還是搞不懂?讓我們直接架設WebSocket Server來實現聊天系統功能，環境為Node.js，下方提供初階教學，操作說明會比較詳細，如果是身為老手的你，可以挑選自己需要的部分來實作，由於內容較多我們將教學分為上下兩篇，做完相信你對WebSocket會有更進一步的了解，準備好了就開始吧
WebSocket 用途
- 建立一個持續不斷的連線
- 伺服器端與使用者端可以互相傳送資料
WebSocket教學前準備
- 一些程式語言邏輯基礎
- 編譯器
打程式碼的工具，ex: VScode or Sublime - Node.js
javascript通常是寫在網頁上，可以被瀏覽器編譯的語言，而Node.js就是另一個能執行javascript程式的環境，今天我們就是利用Node.js來完成Websocket server - 終端機
很多工程師在使用，上面有許多白字在跑，那個黑黑的視窗
Windows : Git Bash
Linux or Mac : 終端機
終端機指令說明
| 指令 | 說明 |
| pwd | 顯示目前所在目錄 |
| ls | 顯示所在目錄所有檔案 |
| cd | 變換當前目錄 |
| mkdir | 創建資料夾 |
| touch | 創建檔案 |
開始開發
建立目錄
以下以Windows作業系統做示範，打開 Git Bash 看到以下畫面
(windows不是命令提示字元唷)
看目前所在資料夾位置
指令:pwd
看所在位置的所有檔案
指令:ls
移動到桌面(可以輸入ls確認看到的檔案是否跟桌面檔案一樣)
指令: cd Desktop
確認 Node.js是否正確安裝(下載完記得重開才有喔)
指令:node -v
下載Node.js
創建一個叫 Talky 的檔案夾
指令: mkdir Talky
移動到 Talky 資料夾內
指令: cd Talky
現在才要正式開始!加油!
建立專案
接下來我們要開始一個node環境的專案囉
指令: npm init
如果沒有特殊需求，可以都先Enter回答最後再輸入yes (npm使用會在另一篇說明)
打開編輯器並開啟Talky資料夾，你會發現裡面有一個package.json的檔案，作用是顯示此專案相關資訊及使用的套件，讓自己及其他開發者知道此專案主要內容
安裝套件 express, ws
安裝express (Node.js的Web開發框架)
指令:npm install express -save
因為Websocket在建立連線時，資料是透過HTTP來傳輸因此需使用Express
安裝ws (我們的WebSocket server)
指令:npm install ws -save
確認package.json可以看到兩個套件已完成安裝
建立連線
在Talky資料夾底下創一個檔案server.js
指令touch server.js
輸入以下程式碼，並參考註解說明
檔案記得存檔喔
到package.json修改內容
打開瀏覽器在網址輸入localhost:3000，就可連線至伺服器
但是WebSocket的port是8000唷，上方程式碼註解有寫
現在我們透過Node.js架設好Server，讓我們進一步了解socket溝通模式吧!
編輯server.js檔案新增以下程式碼
連接 WebSocket server
打開另一個命令視窗並下載wscat
讓使用者連接sever並傳送訊息
指令: npm install -g wscat
下載網址參考: wscat
執行server.js打開伺服器
指令:npm run start(Ctrl + c 可以結束)
接著在新的命令視窗建立連線
指令:wscat -c ws://localhost:8000/{name}
Server是建立在自己電腦上，所以輸入localhost表示本地端，如果要連到別人的Server只需將localhost改成IP或是Domain Name就可以，8000就是在sever.js裡面WebSocket走的Port，換成其他的數字會發現連線失敗
(這裡就是使用者端)
在視窗上看到的Hello就是伺服器端主動丟過來的訊息喔!!
繼續編輯server.js檔案新增以下程式碼
重新執行伺服器
指令:npm run start
使用者端重新連線
指令:wscat -c ws://localhost:8000/{name}
會發現當你傳送訊息給伺服器端，伺服器端會回傳一樣的訊息給你
接著我們需要讓伺服器端知道是誰連線
Sandy連線後，伺服器端連名字也傳送過來了
下列程式碼用來記錄連線的數量，並且將每個連線進來的使用者記錄下來
更改ws.on內容，傳送訊息給除了自己以外的人
再重新執行伺服器
指令:npm run start
並且開兩個使用者
指令:wscat -c ws://localhost:8000/{name1}
指令:wscat -c ws://localhost:8000/{name2}
Sandy傳送你好啊！
在Tom的地方可以看到Sandy傳送的訊息了
我們要讓已經在線上的人知道有誰上線了
新增以下程式碼
Sever重開，使用者重新連線
最後當有人離開時，伺服器端傳送訊息讓其他人知道
(將程式碼加到最後的地方)
Tom 離開聊天室
Sandy收到Tom離開訊息
註:離開訊息是伺服器端主動發送的喔
恭喜你完成了簡單的WebSocket聊天系統囉!
程式碼邏輯有問題的部分，都可以在下方留言讓我知道，因為是自己寫的，如果有更好的方法可以提供，非常願意接受各位大大的指教。