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 ?

| 軟體開發 | 網站建置 | 網頁系統 | 資料庫網站 |

| 客製化網站 (報名系統、投票系統、掛號系統...) |

| 前後端技術合作 |

歡迎與我們聯繫:jessica@penueling.com

加入Line立即聊聊:@539mjyid

0
0 回復

發表評論

Want to join the discussion?
Feel free to contribute!

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。