0.目標與前置條件
這一節(jié)窄俏，我將實現(xiàn)用戶修改昵稱與收發(fā)消息。
這一節(jié)內(nèi)容是在上一節(jié)完成的情況下進行的曹傀，請先參照上一節(jié)完成基本框架的搭建：
Node.js（Express4.x）搭建聊天室1——基本框架
我把搭建聊天室的步驟分成了幾個部分舱殿，請按順序閱讀：
獲取代碼
Node.js（Express4.x）搭建聊天室1——基本框架
Node.js（Express4.x）搭建聊天室2——消息發(fā)送與監(jiān)聽
Node.js（Express4.x）搭建聊天室3——完善網(wǎng)頁
1. 服務端
接下來的代碼，要添加到model/chatroom.js的“//在這里添加更多監(jiān)聽的消息”后面：
/* *************** 更改昵稱 *************** */
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",
});
}
});
我在這里新增了兩個監(jiān)聽接口：
- change_name：當服務端接收到該消息時就轧，會將一起傳來的newname替換用戶當前的username证杭，并存儲在socket.username中，然后廣播告知所有用戶妒御。
- send_msg：當服務端接收到該消息時解愤，將把一起傳來的msg廣播給所有用戶。
2. 客戶端
在views/index.jade文件中乎莉，在“// 添加更多的消息發(fā)送或監(jiān)聽”后面添加如下代碼：
//修改昵稱
function change_name(name){
socket.emit('change_name', name, function (data) {
console.log(data);
});
}
// 監(jiān)聽修改昵稱后返回的消息
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)聽消息
socket.on('msg_sent', function (data) {
console.log(data);
});
這里我們定義了兩個函數(shù)：
- change_name：調(diào)用后琢歇，客戶端向服務端發(fā)送“change_name”消息，從而把自己的昵稱修改為name梦鉴。
- send_msg：調(diào)用后，客戶端向服務器端發(fā)送“send_msg”消息揭保，服務端會把msg廣播給所有用戶肥橙。
對應的，我們還新增了兩個監(jiān)聽：
- name_changed：監(jiān)聽服務端發(fā)出的“name_changed”消息秸侣。當聊天室中有用戶修改了昵稱后存筏，服務端會向所有人發(fā)出該消息宠互。
- msg_sent： 監(jiān)聽服務端發(fā)出的“msg_sent”消息。當聊天室中有用戶發(fā)出消息椭坚，服務端會轉(zhuǎn)發(fā)給所有人予跌。
3.整理一下思路
當客戶端1發(fā)出“change_name”消息給服務端后，服務端會修改該用戶的昵稱善茎，并廣播一條“name_changed”的消息給所有用戶（這里是客戶端2和客戶端3）券册，如下圖所示：
當客戶端1發(fā)出“send_msg”消息給服務端后，服務端廣播一條“msg_sent”的消息給所有用戶（這里是客戶端2和客戶端3）垂涯，如下圖所示：
4.測試
分別打開兩個瀏覽器A烁焙、B，訪問http://127.0.0.1:3000耕赘。
在瀏覽器B的控制臺中骄蝇，輸入change_name("Mike的讀書季")，即把瀏覽器B的用戶昵稱改為“Mike的讀書季”操骡；執(zhí)行后九火，在瀏覽器A中會收到“[Mike] 改名為 [Mike的讀書季]”的消息。
在瀏覽器B的控制臺中册招，輸入send_msg("歡迎你們岔激！")，即瀏覽器B的用戶發(fā)送消息“歡迎你們跨细！”鹦倚；執(zhí)行后，在瀏覽器A中會收到“歡迎你們冀惭！”的消息震叙。
5.小結(jié)
至此，一個聊天室的“骨架”就算搭好了散休。接下來媒楼，為了讓這個聊天室真正可用，還要在客戶端的頁面上做一些處理戚丸；這個應該是前端工程師的工作划址，不過作為一個Node工程師，通吃前后端本來就是應該的限府，所以我打算越俎代庖夺颤，把前端也一起做了。
歡迎閱讀下一節(jié)：
Node.js（Express4.x）搭建聊天室3——完善網(wǎng)頁
原創(chuàng)文章胁勺，未經(jīng)許可世澜，請勿轉(zhuǎn)載
作者：Mike的讀書季
日期：2016.09.20
QQ：1139904786
Blog：http://blog.csdn.net/kkdestiny
