快捷導(dǎo)航

nodejs實(shí)現(xiàn)的一個(gè)簡單聊天室功能分享

更新時(shí)間：2014年12月06日 11:46:19 投稿：junjie

這篇文章主要介紹了nodejs實(shí)現(xiàn)的一個(gè)簡單聊天室功能分享,本文使用了express和socket.io兩個(gè)庫結(jié)合實(shí)現(xiàn),需要的朋友可以參考下

今天我來實(shí)現(xiàn)一個(gè)簡單的聊天室，后臺(tái)用nodejs, 客戶端與服務(wù)端通信用socket.io,這是一個(gè)比較成熟的websocket框架.

初始工作

1.安裝express, 用這個(gè)來托管socket.io,以及靜態(tài)頁面,命令npm install express --save,--save可以使包添加到package.json文件里.
2.安裝socket.io,命令npm install socket.io --save.

編寫服務(wù)端代碼

首先我們通過express來托管網(wǎng)站，并附加到socket.io實(shí)例里，因?yàn)閟ocket.io初次連接需要http協(xié)議

復(fù)制代碼代碼如下:

var express = require('express'),
io = require('socket.io');

var app = express();

app.use(express.static(__dirname));

var server = app.listen(8888);

var ws = io.listen(server);

添加服務(wù)器連接事件，當(dāng)客戶端連接成功之后，發(fā)公告告訴所有在線用戶，并且，當(dāng)用戶發(fā)送消息時(shí)，發(fā)廣播通知其它用戶.

復(fù)制代碼代碼如下:

ws.on('connection', function(client){
    console.log('\033[96msomeone is connect\033[39m \n');
    client.on('join', function(msg){
        // 檢查是否有重復(fù)
        if(checkNickname(msg)){
            client.emit('nickname', '昵稱有重復(fù)!');
        }else{
            client.nickname = msg;
            ws.sockets.emit('announcement', '系統(tǒng)', msg + ' 加入了聊天室!');
        }
    });
    // 監(jiān)聽發(fā)送消息
    client.on('send.message', function(msg){
        client.broadcast.emit('send.message',client.nickname, msg);
    });
    // 斷開連接時(shí)，通知其它用戶
    client.on('disconnect', function(){
        if(client.nickname){
            client.broadcast.emit('send.message','系統(tǒng)', client.nickname + '離開聊天室!');
        }
    })

})

由于客戶端是通過昵稱來標(biāo)識(shí)的，所以服務(wù)端需要一個(gè)檢測昵稱重復(fù)的函數(shù)

復(fù)制代碼代碼如下:

// 檢查昵稱是否重復(fù)

var checkNickname = function(name){

    for(var k in ws.sockets.sockets){

        if(ws.sockets.sockets.hasOwnProperty(k)){

            if(ws.sockets.sockets[k] && ws.sockets.sockets[k].nickname == name){

                return true;

            }

        }

    }

    return false;

}

編寫客服端代碼

由于服務(wù)端采用第三方websokcet框架，所以前端頁面需要單獨(dú)引用socket.io客戶端代碼，源文件可以從socket.io模塊里找，windows下路徑為node_modules\socket.io\node_modules\socket.io-client\dist,這里有開發(fā)版和壓縮版的，默認(rèn)引用開發(fā)版就行.

前端主要處理輸入昵稱檢查，消息處理，完整代碼如下：

復(fù)制代碼代碼如下:

<!DOCTYPE html>
<html>
<head>
    <title>socket.io 聊天室例子</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="css/reset.css"/>
    <link rel="stylesheet" href="css/bootstrap.css"/>
    <link rel="stylesheet" href="css/app.css"/>
</head>
<body>
    <div class="wrapper">
         <div class="content" id="chat">
             <ul id="chat_conatiner">
             </ul>
         </div>
         <div class="action">
             <textarea ></textarea>
             <button class="btn btn-success" id="clear">清屏</button>
             <button class="btn btn-success" id="send">發(fā)送</button>
         </div>
    </div>
    <script type="text/javascript" src="js/socket.io.js"></script>
    <script type="text/javascript">

          var ws = io.connect('http://172.16.2.184:8888');
          var sendMsg = function(msg){
              ws.emit('send.message', msg);
          }
          var addMessage = function(from, msg){
              var li = document.createElement('li');
              li.innerHTML = '<span>' + from + '</span>' + ' : ' + msg;
              document.querySelector('#chat_conatiner').appendChild(li);

// 設(shè)置內(nèi)容區(qū)的滾動(dòng)條到底部
document.querySelector('#chat').scrollTop = document.querySelector('#chat').scrollHeight;

// 并設(shè)置焦點(diǎn)
document.querySelector('textarea').focus();

}

          var send = function(){
              var ele_msg = document.querySelector('textarea');
              var msg = ele_msg.value.replace('\r\n', '').trim();
              console.log(msg);
              if(!msg) return;
              sendMsg(msg);
              // 添加消息到自己的內(nèi)容區(qū)
              addMessage('你', msg);
              ele_msg.value = '';
          }

          ws.on('connect', function(){
              var nickname = window.prompt('輸入你的昵稱!');
              while(!nickname){
                  nickname = window.prompt('昵稱不能為空，請重新輸入!')
              }
              ws.emit('join', nickname);
          });

          // 昵稱有重復(fù)
          ws.on('nickname', function(){
              var nickname = window.prompt('昵稱有重復(fù)，請重新輸入!');
              while(!nickname){
                  nickname = window.prompt('昵稱不能為空，請重新輸入!')
              }
              ws.emit('join', nickname);
          });

          ws.on('send.message', function(from, msg){
              addMessage(from, msg);
          });

          ws.on('announcement', function(from, msg){
              addMessage(from, msg);
          });

          document.querySelector('#clear').addEventListener('click', function(){
              document.querySelector('#chat_conatiner').innerHTML = '';
          });
    </script>
</body>
</html>

這里提供完整的代碼壓縮文件

總結(jié)

nodejs是一個(gè)好東西，尤其是在處理消息通訊，網(wǎng)絡(luò)編程方面，天生的異步IO.

您可能感興趣的文章: