0.目標(biāo)與前置條件
這一節(jié)，我將實(shí)現(xiàn)用戶修改昵稱與收發(fā)消息。
這一節(jié)內(nèi)容是在上一節(jié)完成的情況下進(jìn)行的，請(qǐng)先參照上一節(jié)完成基本框架的搭建：
Node.js（Express4.x）搭建聊天室1——基本框架
我把搭建聊天室的步驟分成了幾個(gè)部分，請(qǐng)按順序閱讀：
獲取代碼
Node.js（Express4.x）搭建聊天室1——基本框架
Node.js（Express4.x）搭建聊天室2——消息發(fā)送與監(jiān)聽(tīng)
Node.js（Express4.x）搭建聊天室3——完善網(wǎng)頁(yè)
1. 服務(wù)端
接下來(lái)的代碼，要添加到model/chatroom.js的“//在這里添加更多監(jiān)聽(tīng)的消息”后面：
/* *************** 更改昵稱 *************** */
socket.on('change_name', function (newname) {
if (addedUser) {
var oldname = socket.username;
socket.username = newname;
// 告知所有用戶
socket.broadcast.emit('name_changed', {
username: newname,
msg: "["+oldname+"] 改名為 ["+socket.username + "]",
type: "BROADCAST",
numUsers: guest_num
});
}
});
/* *************** 發(fā)送消息 *************** */
socket.on('send_msg', function (msg) {
if (addedUser) {
// 廣播消息
socket.broadcast.emit('msg_sent', {
username: socket.username,
msg: msg,
type: "BROADCAST",
});
}
});
我在這里新增了兩個(gè)監(jiān)聽(tīng)接口：
- change_name：當(dāng)服務(wù)端接收到該消息時(shí)，會(huì)將一起傳來(lái)的newname替換用戶當(dāng)前的username，并存儲(chǔ)在socket.username中，然后廣播告知所有用戶。
- send_msg：當(dāng)服務(wù)端接收到該消息時(shí)，將把一起傳來(lái)的msg廣播給所有用戶。
2. 客戶端
在views/index.jade文件中，在“// 添加更多的消息發(fā)送或監(jiān)聽(tīng)”后面添加如下代碼：
//修改昵稱
function change_name(name){
socket.emit('change_name', name, function (data) {
console.log(data);
});
}
// 監(jiān)聽(tīng)修改昵稱后返回的消息
socket.on('name_changed', function (data) {
console.log(data);
});
//發(fā)送消息
function send_msg(msg){
socket.emit('send_msg', msg, function (data) {
console.log(data);
});
}
// 監(jiān)聽(tīng)消息
socket.on('msg_sent', function (data) {
console.log(data);
});
這里我們定義了兩個(gè)函數(shù)：
- change_name：調(diào)用后，客戶端向服務(wù)端發(fā)送“change_name”消息，從而把自己的昵稱修改為name。
- send_msg：調(diào)用后，客戶端向服務(wù)器端發(fā)送“send_msg”消息，服務(wù)端會(huì)把msg廣播給所有用戶。
對(duì)應(yīng)的，我們還新增了兩個(gè)監(jiān)聽(tīng)：
- name_changed：監(jiān)聽(tīng)服務(wù)端發(fā)出的“name_changed”消息。當(dāng)聊天室中有用戶修改了昵稱后，服務(wù)端會(huì)向所有人發(fā)出該消息。
- msg_sent： 監(jiān)聽(tīng)服務(wù)端發(fā)出的“msg_sent”消息。當(dāng)聊天室中有用戶發(fā)出消息，服務(wù)端會(huì)轉(zhuǎn)發(fā)給所有人。
3.整理一下思路
當(dāng)客戶端1發(fā)出“change_name”消息給服務(wù)端后，服務(wù)端會(huì)修改該用戶的昵稱，并廣播一條“name_changed”的消息給所有用戶（這里是客戶端2和客戶端3），如下圖所示：
當(dāng)客戶端1發(fā)出“send_msg”消息給服務(wù)端后，服務(wù)端廣播一條“msg_sent”的消息給所有用戶（這里是客戶端2和客戶端3），如下圖所示：
4.測(cè)試
分別打開(kāi)兩個(gè)瀏覽器A、B，訪問(wèn)http://127.0.0.1:3000。
在瀏覽器B的控制臺(tái)中，輸入change_name("Mike的讀書(shū)季")，即把瀏覽器B的用戶昵稱改為“Mike的讀書(shū)季”；執(zhí)行后，在瀏覽器A中會(huì)收到“[Mike] 改名為 [Mike的讀書(shū)季]”的消息。
在瀏覽器B的控制臺(tái)中，輸入send_msg("歡迎你們！")，即瀏覽器B的用戶發(fā)送消息“歡迎你們！”；執(zhí)行后，在瀏覽器A中會(huì)收到“歡迎你們！”的消息。
5.小結(jié)
至此，一個(gè)聊天室的“骨架”就算搭好了。接下來(lái)，為了讓這個(gè)聊天室真正可用，還要在客戶端的頁(yè)面上做一些處理；這個(gè)應(yīng)該是前端工程師的工作，不過(guò)作為一個(gè)Node工程師，通吃前后端本來(lái)就是應(yīng)該的，所以我打算越俎代庖，把前端也一起做了。
歡迎閱讀下一節(jié)：
Node.js（Express4.x）搭建聊天室3——完善網(wǎng)頁(yè)
原創(chuàng)文章，未經(jīng)許可，請(qǐng)勿轉(zhuǎn)載
作者：Mike的讀書(shū)季
日期：2016.09.20
QQ：1139904786
Blog：http://blog.csdn.net/kkdestiny
