一步一步教您用websocket+nodeJS搭建簡易聊天室(4)

02-03

上節中帶大家基於websoket與nodejs搭建了一個基本的聊天室雛形，實現了基本的聊天消息首發，用戶狀態顯示，異常處理。但是這裡仍然有個問題，我們發現聊天消息看不出來是誰發送的，並且與用戶狀態提示消息混雜在一起，很不友好，需要優化。

本節將實現用戶消息的發送人顯示，將聊天消息與用戶狀態提示消息用不同顏色標識，進行分離，以方便查看。

我們新建webSocketDemo4文件夾，然後將上節中webSocketDemo3文件夾中的所有文件拷貝進來。

然後index.html代碼修改如下：

<!doctype html> <html> <head> <meta charset="utf-8"> <title>websocket</title> </head> <body> <h1>Chat Room</h1> <input id="sendText" type="text" /> <button id="sendBtn">發送</button> <div id="recv"></div> </body> <script type="text/javascript"> var websocket=new WebSocket("ws://localhost:3000");

ttfunction showMessage(str,type){

tttvar div=document.createElement("div");
tttdiv.innerHTML=str;
tttif (type=="enter"){
ttttdiv.style.color="blue";
ttt}else

if(type=="leave"){
ttttdiv.style.color="red";
ttt}
tttdocument.body.appendChild(div);
tt}

 
ttwebsocket.onopen=function(){
tttconsole.log("websocket open");
tttdocument.getElementById("sendBtn").onclick=function(){
tttvar txt=document.getElementById("sendText").value;
tttif(txt){
ttttwebsocket.send(txt);
ttt}
ttt
tt}
t}

 
ttwebsocket.onclose=function(){
tttconsole.log("websocket close");
ttt
tt}
ttwebsocket.onmessage=function(e){
tttconsole.log(e.data);
tttvar mes=JSON.parse(e.data)
ttt
tttshowMessage(mes.data,mes.type);
tt}

 
tt
t&lt;/script&gt;

</html>

再將wsServer.js代碼內容修改如下：n

var ws = require("nodejs-websocket")

var port=3000;
var user=0;
// Scream server example: "hi" -&gt; "HI!!!"

var server = ws.createServer(function (conn) {
tconsole.log("New connection");
tuser++;
tconn.nickname="user"+user;
tvar mes={};

 
tmes.type="enter";
tmes.data=conn.nickname+" comes in"
tbroadcast(JSON.stringify(mes));
tconn.on("text", function (str) {
ttconsole.log("Received "+str)
tt//conn.sendText(str.toUpperCase()+"!!!")

var mes={};
ttmes.type="message";
ttmes.data=conn.nickname+" says:    "+str;
ttbroadcast(JSON.stringify(mes));
t})

 
tconn.on("close", function (code, reason) {
ttconsole.log("Connection closed");
ttvar mes={};
ttmes.type="leave";
ttmes.data=conn.nickname+" left"
ttbroadcast(JSON.stringify(mes));
t})
tconn.on("error", function (err) {
ttconsole.log("handdle error");
ttconsole.log(err);

 
t})
}).listen(port);
console.log("websocket server listening on port "+port);
function

broadcast(str){
tserver.connections.forEach(function(connection){
ttconnection.sendText(str);
t})
}

接下來使用終端cd進webSocketDemo4，然後重新運行以下命令以運行服務：n

npm install nodejs-websocket

客戶端運行截圖n

終端運行截圖：

為了便於大家交流特新建了一個微信群，方便大家交流：

請掃描二維碼進群：

https://weixin.qq.com/g/A_Xyc6VMMEJ_VfhR (二維碼自動識別)