express + socket.io 推送訊息至前端

由於我們後端工程師實在是忙得不可開交，而且交給老闆看的demo總不能一直

「這邊等後端好之後就會收到了」、

「那邊我目前先寫死，等有資料後就能運作」…

一堆這種讓老闆有機可乘說你只做90分的理由，

因此我決定來著手弄個最最最簡單的 server，express 就是最適合做這種小小實驗性質的 mock server，又剛好我只需要會寫 javascript，那就一步一步來吧。

 

大綱：

1. 創建專案
2. 安裝 express
3. 架設基礎 server
4. 安裝 socket.io
5. 推送訊息到特定 event

---

 

創建專案

終端機打開，cd 到你平常放專案的路徑下，新增一個專案資料夾，創建 node 專案

$ cd projects/
$ mkdir mock-server
$ cd mock-server
$ yarn init

yarn init 會出現許多要你填的資料，不知道填什麼的就直接 Enter 跳過。

 

安裝 express

$ yarn add express http

 

架設基礎 server

在 index.js 裡面貼上以下程式碼

const express = require('express');
const cors = require('cors');
const app = require('express')();
const http = require('http').Server(app);

app.use(cors()); // 解決跨域問題
app.use(express.json()); 
app.use('/', (req, res) =>{
  res.send('hello!!');
});
http.listen(3000, () => console.log('connected 3000'));

啟動 server：

$ node index.js

這時候你可以打開瀏覽器的 localhost:3000 畫面上會出現 hello!! 表示有成功架起來。

 

 

安裝 socket.io

$ yarn add socket.io

在 index.js 中我們需要引入並創建 socket 實例。

path是你可以自己定義，你可能不想跟其他 restful api 混淆，就可以自己獨立開一個path，當然，這樣前端訂閱的時候也會需要進到這個path訂閱，在這邊我的path是/ws。

const io = require('socket.io')(http, { path: '/ws' });

監聽前端是否有連線到

io.on('connection', socket => {
  console.log('server connected');
});

 

因為我習慣把所有api獨立放在一個資料夾，就會使用到express router，在index.js創建的socket實例，也就必須傳到router中才能被呼叫，傳入的方法：

app.io = io;

到目前為止的index.js完整程式碼：

const express = require('express');
const cors = require('cors');
const app = require('express')();
const http = require('http').Server(app);
const io = require('socket.io')(http, { path: '/ws' });

app.io = io;
app.use(cors());
app.use(express.json());
app.use('/', require('./api')); // 這邊就是我的router的資料夾
http.listen(3000, () => console.log('connected 3000'));

io.on('connection', socket => {
  console.log('server connected');
});

 

 

推送訊息到特定 eventName

在這邊我呼叫socket的方法會寫在router裡面。

在你的專案很龐大的時候，你可能會希望有各種不同種類的socket，例如：收到新訊息、客戶已付款、餐廳現場跳號…等。這時候就可以用eventName來區分。

在這邊我的eventName就自己取名叫做newOrder。

推送新訊息的 funcion 叫做 emit。

我送給前端的內容就是一個物件，內容是{ hasOrder : true } 。

最後 api 要有 response，就回傳一個 204。

const { Router } = require('express');
const router = Router();

router.post('/newOrder', async (req, res) => {
  req.app.io.emit('newOrder', { hasOrder: true });
  res.status(204).json({});
});

module.exports = router;

---

 

如何測試

打開 postman 網頁版，直接送 request 到 http://localhost:3000/newOrder [ POST ] 看看你前端訂閱的畫面有沒有收到訊息。

 

延伸閱讀：如何在 react native 訂閱 socket ?