express 搭配 mongodb 建立聊天室。
有鑑於先前發過相關系列文章：
當然要來一篇 MongoDB，但不會特別著重在此。
原本想說寫個 CRUD，寫著寫著就 局部最佳化了......
如果沒有安裝過 MongoDB，可以參考此篇：
一、前言
這篇比較適合初探 Socket.IO 才對，並以聊天室為例子，
整體架構上為：
- Node.js Express (back-End)
- MongoDB (database)
- Socket.IO (time engine)
- Tocas UI (css library)
這篇的完成專案放置在 Github 上，可以直接 clone 下來試試，
由於本範例沒有使用 jQuery，所以可能內容會有點多惹，
如果覺得不錯，不妨給個⭐。😊
範例結果畫面
二、框架安裝與環境設置
express - 安裝
本範例使用 ejs 樣板引擎。
npm install -g express-generator@4
express chat --view=ejs && cd./chat
npm install
MongoDB - 安裝
npm install -S mongoose
通常個人習慣會建立資料表的基本模型，
因此先建立一個資料夾名為 models，
裡面新增 Messages.js，此檔案用來定義 Schema。
[ models / Messages.js ]
本表儲存聊天紀錄，欄位有三個，詳細設定可以參考 Schema()。
const mongoose = require('mongoose');
const messagesSchema = mongoose.Schema({
name: String,
msg: String,
time: Number,
});
module.exports = mongoose.model('Messages', messagesSchema);
- name：使用者名稱。
- msg：訊息內容。
- time：發送時間。
Socket.IO - 安裝
安裝 socket.io。
npm install -S socket.io
[ app.js ]
於 app 下方，引入 socket.io，並使用 3001 port 進行監聽。
/* ... 以上省略 */
var app = express();
const server = require('http').Server(app);
const io = require('socket.io')(server);
io.on('connection', (socket) => {
console.log('a user connected');
socket.on("disconnect", () => {
console.log("a user go out");
});
});
server.listen(3001);
- connection：使用者連線監聽，為保留事件。
- disconnect：使用者斷開連線，為保留事件。
[ views / index.ejs ]
為了方便測試是否成功，我們可以在前端頁面進行通訊連線，
另外建立一個檔案 app.js (方便整理)，進行連線操作，
引入 socket.io.js 以及 app.js。
<script src='https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.0.4/socket.io.js'></script>
<script src="./javascripts/app.js"></script>
[ public / javascripts / app.js ]
socket = io.connect('ws://localhost:3001');
重啟服務並瀏覽網頁 http://localhost:3000/，
或是關閉網頁就可看到使用者離開訊息。
Socket.IO - 廣播訊息
我們可以利用 io.emit，將訊息廣播給使用者。
簡易架構圖如下：
- 當使用者發送訊息時，廣播 chat 事件。
- 當使用者離開連線時，廣播 disconnect 事件。
[ app.js ]
io.on('connection', (socket) => {
console.log('a user connected');
io.emit("message", 'Hello wWrld!');
socket.on("disconnect", () => {
console.log("a user go out");
});
});
- message：為廣播名稱。
[ public / javascripts / app.js ]
用戶端監聽廣播名稱 message。
socket = io.connect('ws://localhost:3003');
socket.on('message', (obj) => {
console.log(obj);
});
開啟瀏覽器 ( http://localhost:3000/ ) + F8 ，
接收伺服器廣播訊息。
Socket.IO - 發送訊息
[ app.js ]
接下來要實作用戶端發送訊息，
首先於伺服器建立事件傾聽：
// io.on('connection', (socket) => { ...
socket.on("message", (obj) => {
io.emit("message", '應聲蟲:' + obj);
});
- 當接收來自用戶端發送的訊息後，伺服器廣播回去。
[ public / javascripts / app.js ]
socket.emit('message', 'Hi! Robby');
開啟瀏覽器 ( http://localhost:3000/ ) + F8 ，
使用者發送訊息，伺服器立即廣播回來。
Next Stop ...
Node.js - Express + MongoDB + Socket.IO (以聊天室為範例) -［2］
有勘誤之處，不吝指教。ob'_'ov
