Socket.IO技術應用於Vue.js + Node.js專案(1)

前言

因為想要試著打造一個線上問答平台，此平台專案採前後分離形式，前端選用Vue框架，後端則是選擇較為熟悉的Node.js+MySQL建立API，而除了基本提問及解答外，問答莫過於最強調即時性了，身為一名發問的學生，一定是最想即時知道自己的問題什麼時候被解決吧😁

在此專案之前，有曾經以Socket.IO技術在全端的架構下打造公開及私人聊天室，於是在此專案建立了基本功能後，便想試著加入Socket.io技術來處理這個即時性的需求，至於Socket.io到底是什麼技術以及如何應用在這樣架構下的專案中，我會在接下來的文章中介紹我於研究整理後對自己應用的經驗做簡單分享，就讓我們繼續看下去吧。

什麼是Socket.IO?

Socket.IO技術可以實現後端(伺服器)和前端(客戶端)的通信實時雙向，與以往建立專案通常都是由資料改變而驅動畫面的改變概念有所不同。

從應用角度我認為Socket.IO可以簡單區分成兩個部分，發送事件以及監聽事件，屬於事件驅動的一種技術，如下面提供簡單的Code範例，當前端頁面登入時發送(emit)一個名為”greetingFromClient”的事件並帶有”Hello Backend”字串的資料至後端，後端監聽(on)到此事件後即可將收到的資料(msg)打印(console.log)出，並發送一個名為”greetingFromServer”的事件至前端，前端監聽到事件後及觸發並打印出”Hello,Frontend!”，用這個技術是不是很簡單就讓前後端實現零距離的打招呼呢😆

//前端
socket.emit("greetingFromClient","Hello, Backend!")
//後端
socket.on("greetingFromClient",function (msg) {
console.log(msg)  //Hello, Backend!
socket.emit("greetingFromServer","Hello,Frontend!")
})
//前端
socket.on("greetingFromServer",function (msg) {
console.log(msg) //Hello,Frontend!
})

到這裡應該已經有點感覺，Socket.IO就是不斷的透過事件的傳遞來完成溝通，以此基本概念下在應用上就可以很多元，例如監聽客戶端/伺服器端上下線事件、按按鍵事件觸發和上傳照片事件觸發等等。

而除了基本的廣播事件傳遞外，相信更多時候是需要將特定資料傳送至特定的客戶端，以此專案來說，當然希望當某老師解完某學生的問題時，能夠只有即時通知該學生，而並非所有連線中的客戶端；另外也同樣希望只有老師身份的人可以收到學生新貼出問題的通知。此時就可以利用一些Socket.IO提供的方法來達成，參考socket-cheatsheet.js整理了一些自己在專案中常用的語法。其中room的方法即是我在此專案用來區分身份的好幫手，此語法可以幫助我讓特定身份的人加入指定room，並在傳送特定訊息時，只傳送到該room裡，讓我順利呈現想要的樣子🙆🏼。

socket.emit('msg', "Ｈello"); //sending to sender-client only
socket.broadcast.emit('msg', "Hello"); //sending to all clients except sender
socket.broadcast.to('game').emit('message', 'Hello'); //sending to all clients in 'game' room(channel) except sender
socket.to('game').emit('msg', 'Hello'); //sending to sender client, only if they are in 'game' room(channel)
socket.broadcast.to(socketid).emit('msg', 'Hello'); //sending to individual socketid
io.emit('msg', "Hello"); //sending to all clients, include sender
io.in('game').emit('msg', 'Hello'); //sending to all clients in 'game' room(channel), include sender
socket.on(); //event listener, can be called on client to execute on server

打到這裡才發現已經打了不少，考量到文章的的易讀性及段落性，我就在這裡先git commit了😆。簡單認識Socket.IO後，接下來就是實際應用在專案中，包含引入前後端的套件、前置作業以及邏輯如何實現等等，我會在下一篇文章繼續分享。