Node.js - Express + MongoDB + Socket.IO (以聊天室為範例) -[1]

express 搭配 mongodb 建立聊天室。

 

有鑑於先前發過相關系列文章:

 

當然要來一篇 MongoDB,但不會特別著重在此。

原本想說寫個 CRUD,寫著寫著就 局部最佳化了......

 

如果沒有安裝過 MongoDB,可以參考此篇:

 

由於內容太多了,本系列將分成上下篇說明

 

 

 

一、前言

這篇比較適合初探 Socket.IO 才對,並以聊天室為例子,

整體架構上為:

 

這篇的完成專案放置在 Github 上,可以直接 clone 下來試試,

由於本範例沒有使用 jQuery,所以可能內容會有點多惹,

如果覺得不錯,不妨給個⭐。😊

 

範例結果畫面

DEMO:http://218.161.68.185/

 

 

 

二、框架安裝與環境設置

 

express - 安裝

本範例使用 ejs 樣板引擎。

npm install -g express-generator@4
express chat --view=ejs && cd./chat
npm install

 

 

MongoDB - 安裝

本專案使用 mongoose 套件進行 CRUD

npm install -S mongoose

 

通常個人習慣會建立資料表的基本模型,

因此先建立一個資料夾名為 models

裡面新增 Messages.js,此檔案用來定義 Schema。

 

為了方便辨識,習慣 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,將訊息廣播給使用者。

簡易架構圖如下:

「SocketIO on 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