ServiceChat 客服聊天
介紹
ServiceChat 是一套運作在 node.js 的客服聊天網頁，包括用戶端和客服端，放在node的初衷也是為了友善學習前端的人更加容易上手，整個項目功能豐富，但可維護性差了寫，因為是以的功能和頁面都怼在了一個頁面，這也算是當初做的比較急的原因吧，但完全不擔心使用問題，如果你不滿意這種寫法可自行抽取封裝，感謝支援！
功能一覽
- 機器人智能聊天
- 客服手動線上離線
- 使用者主動向客服發送資訊（資訊包括文本、表情包）
- 客服選擇會話成員，并且主動向使用者發送資訊（資訊包括文本、表情包）
- 使用者/客服接收到對方發送的資訊
- 客服主動關閉使用者會話，離線清單顯示離線使用者，使用者端提示客服主動關閉會話，本次會話結束
- 客服手動離線，清除所有會話清單，使用者端提示客服已離線，本次會話結束
- 客服重新整理或關閉頁面下線，清除所有會話清單，使用者端提示客服已離線，本次會話結束
- 使用者重新整理頁面或關閉頁面，客服端提示使用者已下線，本次會話結束
- 客服切換右邊工具欄，選擇快捷回複，可選中快捷回複資訊以此快速回複内容
- 發送資訊，如果伺服器中斷，資訊狀态為 0（未發送出），若 20 秒伺服器仍為斷開，資訊狀态改成-1（發送失敗），若 20 秒内伺服器恢複，資訊狀态改成 1（發送成功）
- 在使用者端加入 productId，使用者可發送商品卡片
- 客服接收使用者發送的商品卡片，并且檢視詳情
- 完成圖檔發送，若圖檔過大時進行圖檔壓縮，圖檔超大時不允許發送
- 完成圖檔接收，檢視
- 使用者多台裝置線上時，強制另一台裝置下線
- 客服多台裝置線上時，強制舊客服端下線，并且中斷會員的會話
項目位址
GitHub：https://github.com/Arles-hsh/ServiceChat
碼雲：https://gitee.com/service-chat/service-chat
如果您對此項目有興趣，可以點 “Star” 支援一下 謝謝！
如果有任何的疑惑或建議，請在評論中提出，歡迎評論！
效果圖
使用者端進入客服界面：
注意：因為需要實作轉人工的功能，所有通路時是帶來參數的，即位址中的 sendId，目的是為了擷取該使用者的資訊，除此之外，需要注意的是，使用者端采用的是手機端，是以需要你在浏覽器中 f12，把手機的模拟器亮起來
使用者轉人工：
發送消息（包括文字、圖檔、表情包）
客服快捷回複功能
使用者下線或客服下線通知
發送卡片功能
注意：此時為了模拟浏覽的商品，位址參數多了 productId
功能示範暫時先上這些，還有許多的功能等着小夥伴們去探索，應該有人開始疑惑，上面示範的 sendId 和 productId 如何比對上對應的使用者和商品資訊呢，其實我是提前放在後端的 json 數組裡了，目的是模拟資料庫中的資料，除此之外，還有快捷回複、使用者留言、機器人回複的 json 資訊
接下來，說下項目 clone 下來後，需要完成那些事情才能把項目跑起來
安裝依賴
- 後端依次輸入以下指令：
cd service
npm install
node app.js
- 前端依次輸入以下指令：
cd chatroom
npm install
npm run serve
浏覽器運作
使用者端打開：http://localhost:8080/?sendId=3
客服端打開：http://localhost:8080/?sendId=1
若需要發送卡片功能，使用者端打開：http://localhost:8080/?sendId=3&productId=300
具體參數對應的資訊，可檢視 userList.json 和 product.json 檔案
到現在就已經是大功告成，客服項目的最終效果就展示出來了
簡略說明
- 後端處理： 2.前端 Chat.vue 是核心檔案，需要看懂的話需要一些時間，html 和 css 樣式雖然有點多，但這些相信你有基礎的話還是不難了解的，其中有點難度的可能是 js 的處理邏輯，如果不懂的可以随時來打擾~
vue+node+socket.io實作客服聊天功能
後言
該項目前身其實是我用 C#的 signalr 架構完成的，因為涉及到其他語言，對很多前端學習者來說是不太友好，是以我在想怎麼才能把它轉移到前端來給更多的前端愛好者來學習，于是花了許多時間将舊項目抽取、改進、完善才有了現在的最終效果，其中 node 涉及到的并不多，也就是簡單的 js 而已，大家上手更容易，最後附上我學習中時參考的 socket 手冊：socket.io 中文手冊