天天看點
傳回

nodejs+nowjs實作聊天室

  • 部落格分類： 
  • nodejs
  • nowjs
  • WebSocket

nowjs  支援多房間，支援私聊，使用nowjs庫，伺服器端代碼不到100行。需要jquery1.7.1和coffee-script.js，讀者可自行下載下傳。 

重點： 

1、nowjs中Group的使用，如何周遊Group内的users。 

2、用戶端如何異步調用伺服器端函數。 

3、如何與特定使用者通信。 

運作 

引用 node app.js

在浏覽器中通路 http://localhost:8080 

app.js 

Javascipt代碼  

nodejs+nowjs實作聊天室
  1. require('coffee-script');  
  2. require('./chatroomserver');  

chatroomserver.coffee 

coffeescript代碼，重點部分已加上注釋 

Coffeescript代碼  

nodejs+nowjs實作聊天室
  1. fs = require 'fs'  
  2. url = require 'url'  
  3. html = fs.readFileSync __dirname + '/chatroom.html'  
  4. jquery = fs.readFileSync __dirname + '/../js/jquery-1.7.1.min.js'  
  5. coffeescript = fs.readFileSync __dirname + '/../js/coffee-script.js'  
  6. server = require('http').createServer((req, res)->  
  7.   pathname = url.parse(req.url).pathname  
  8.   res.end html if pathname == '/'  
  9.   res.end jquery if pathname == '/jquery.js'  
  10.   res.end coffeescript if pathname == '/coffee-script.js'  
  11. )  
  12. server.listen 8080  
  13. nowjs = require 'now'  
  14. everyone = nowjs.initialize server  
  15. rooms = {}  
  16. rooms['lobby'] = '大廳'  
  17. rooms['room1'] = '房間1'  
  18. rooms['room2'] = '房間2'  
  19. rooms['room3'] = '房間3'  
  20. onlineUsers = {} #所有線上使用者  
  21. everyone.now.chckUser = (name, callback) -> #重點，使用異步方法調用  
  22.   callback onlineUsers[name] != undefined #檢查是否已有同名使用者  
  23. everyone.now.initlize = ->  
  24.   @now.updateRooms rooms  
  25.   @now.room = 'lobby'  
  26.   onlineUsers[@now.username] = @user.clientId  
  27.   _lobby = nowjs.getGroup @now.room  
  28.   _lobby.addUser @user.clientId  
  29.   _lobby.now.receiveMessage "[SYS]#{@now.username} 進入#{rooms[@now.room]}， 歡迎!"  
  30.   updateRoomUser @now.room  
  31. updateRoomUser = (roomid) ->#更新房間的使用者  
  32.   _users = []  
  33.   _group = nowjs.getGroup roomid  
  34.   _group.getUsers (usersid) ->#用Group#getUsers(callback)方法  
  35.     _users = []  
  36.     _users.push _group['users'][userid]['now']['username'] for userid in usersid #重點：取group中的使用者名，要注意group的結構  
  37.   _group.now.updateOnlineUsers _users  
  38. everyone.now.changeRoom = (newRoom) ->  
  39.   nowjs.getGroup(@now.room).removeUser(@user.clientId)  
  40.   nowjs.getGroup(@now.room).now.receiveMessage "[SYS]#{@now.username}離開#{rooms[@now.room]}進入#{rooms[newRoom]}，再見!"  
  41.   updateRoomUser @now.room  
  42.   nowjs.getGroup(newRoom).addUser(@user.clientId)  
  43.   @now.room = newRoom  
  44.   nowjs.getGroup(newRoom).now.receiveMessage "[SYS]#{@now.username} 進入#{rooms[newRoom]}，歡迎!"  
  45.   updateRoomUser newRoom  
  46. everyone.disconnected ->#當斷開連接配接時，觸發  
  47.   nowjs.getGroup(@now.room).now.receiveMessage "[SYS]#{@now.username}走了，再見!"  
  48.   nowjs.getGroup(@now.room).removeUser(@user.clientId)  
  49.   delete onlineUsers[@now.username]  
  50.   updateRoomUser @now.room  
  51. everyone.now.distributePersonalMessage = (to, message) -> #私聊  
  52.   self = @ #儲存this  
  53.   _gruop = nowjs.getGroup(@now.room)  
  54.   _gruop.hasClient onlineUsers[to], (bool) -> #判斷使用者是否線上，使用回調函數  
  55.     if bool  
  56.       self.now.receiveMessage "我對#{to}說：#{message}"  
  57.       nowjs.getClient onlineUsers[to], ->  
  58.         this.now.receiveMessage "#{self.now.username}對我說：#{message}"#重點：如何跟特定使用者通信  
  59.     else  
  60.       self.now.receiveMessage "[ERR]#{to}不在這個房間！"  
  61. everyone.now.distributeMessage = (message) ->  
  62.   nowjs.getGroup(@now.room).now.receiveMessage(message);  

chatroom.html 

Html代碼  

nodejs+nowjs實作聊天室
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  
  2.         "http://www.w3.org/TR/html4/loose.dtd">  
  3. <html>  
  4. <head>  
  5.     <title>聊天室</title>  
  6. </head>  
  7. <script type="text/javascript" src="/jquery.js"></script>  
  8. <script src="/nowjs/now.js"></script>  
  9. <script src="/coffee-script.js"></script>  
  10. <script type="text/coffeescript">  
  11.     now.receiveMessage = (message) ->  
  12.         $("div#talkFrame").append "<br>"+ message  
  13.     $(document).ready ->  
  14.         $('#login').click ->  
  15.             if $('#userName').val() == ''  
  16.                 alert 'please input user name!'  
  17.             else  
  18.                 now.chckUser $('#userName').val(), (exist)-> #重點：使用回調函數，異步調用的方式。  
  19.                     if exist  
  20.                         alert '該使用者已存在，請另取名字!'  
  21.                         $('#userName').focus()  
  22.                     else  
  23.                         now.username = $('#userName').val()  
  24.                         now.initlize()  
  25.                         $('span#name').text("#{now.username}說：")  
  26.                         $("#prePage").hide()  
  27.                         $("#mainPage").show()  
  28.     $(document).on "click", "a.change", ->#點選房間名時進入房間。jquery對于動态建立元素的通路方式，此方式需要jquery1.7.+版本  
  29.         now.changeRoom($(this).attr('id'))  
  30.         $('#currentName')[0].innerHTML = $(this).text()  
  31.     $(document).on "click", "a.users", -> #點選使用者名時  
  32.         $("input#message").val("@#{$(this).text()}:")  
  33.         $("input#message").focus()  
  34.     $(document).on "keydown", "input#message", (event)->#捕獲回車  
  35.         if event.keyCode==13  
  36.             $('input#send').click()  
  37.         else  
  38.             $('input#send').click() if event.altKey and event.keyCode==83#Alt + s快捷鍵發送  
  39.     $('input#send').click ->  
  40.         mess = $('input#message').val()  
  41.         if  mess == ''  
  42.             return  
  43.         #head = "#{now.username} 說："  
  44.         if mess[0] == '@' #私聊  
  45.             if mess.search(':') == -1  
  46.                 alert '格式不對，對象名後面少了":"，請重新輸入！'  
  47.                 $("input#message").focus()  
  48.                 return  
  49.             to = mess.substring 1, mess.search(':')#提取私聊對象  
  50.             head = "#{now.username} 對 #{to} 說："  
  51.             now.distributePersonalMessage to, utils.toStaticHTML mess.substring mess.search(':') + 1  
  52.             $('input#message').val "@#{to}: "  
  53.         else  
  54.             now.distributeMessage "<a href='#' class='users'>#{now.username}</a> 說：#{utils.toStaticHTML mess}"  
  55.             $('input#message').val ''  
  56.     now.updateRooms = (rooms) ->  
  57.         $('div#rooms').empty()  
  58.         $('div#rooms').append "<a href='#' id = #{roomid} class='change'>#{rooms[roomid]}</a>&nbsp;&nbsp;" for roomid in Object.keys rooms  
  59.     now.updateOnlineUsers = (users) ->  
  60.         $('div#onlineUsers').empty()  
  61.         $('div#onlineUsers').append "<br/><a href='#' class='users'>#{user}</a>" for user in users  
  62.     utils = toStaticHTML: (text)->  
  63.         inputHtml = text.toString()  
  64.         inputHtml.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;")  
  65. </script>  
  66. <body>  
  67. <div id='prePage' class='page' style='width:690px;text-align:center;'>  
  68.     <input id='userName' type='text' placeholder="請輸入您的昵稱"/>&nbsp;  
  69.     <input id='login' type='button' value='進入聊天室'/>  
  70. </div>  
  71. <div id='mainPage' class='page' style='display:none;'>  
  72.     <div style='overflow:hidden;'>  
  73.         <div class='talkLeft'>  
  74.             <h2 id='currentName' style='text-align:center;'>大廳</h2>  
  75.             <div id='talkFrame'></div>  
  76.             <div id='inputDiv'>  
  77.                 <span id ="name"></span><input type="text" placeholder="嗨，随便說點啥呗" id="message" size="20"></textarea>  
  78.             </div>  
  79.             <div>  
  80.                 <input class='f-right' type='button' value='發送' id="send"/>  
  81.             </div>  
  82.         </div>  
  83.         <div class='talkRight'>  
  84.             <div id='onlineUsers'></div>  
  85.         </div>  
  86.         <div id = 'rooms' style='text-align:center;'>  
  87.          </div>  
  88.     </div>  
  89. </div>  
  90. </body>  
  91. </html>  

網頁有部分借鑒https://github.com/auzll/nodechat。 

附加資訊，有興趣的讀者可以自己嘗試： 

Group有Group#hasClient = function (clientId, callback)判斷使用者是否在組裡，但是沒類似Now#getClient = function (clientId, callback)。Group#getClient應該很有用，能不能自己加上去呢？找到now\lib\gruop.js檔案，添加下面的代碼： 

Javascript代碼  

nodejs+nowjs實作聊天室
  1. Group.prototype.getClient = function (clientId, callback) {  
  2.   callback.apply(this.users[clientId]);  
  3. };  

于是服務端私聊部分的代碼可寫成： 

Coffeescript代碼  

nodejs+nowjs實作聊天室
  1. everyone.now.distributePersonalMessage = (to, message) -> #私聊  
  2.   self = @ #儲存this  
  3.   _gruop = nowjs.getGroup(@now.room)  
  4.   _gruop.hasClient onlineUsers[to], (bool) -> #判斷使用者是否線上，使用回調函數  
  5.     if bool  
  6.       self.now.receiveMessage "我對#{to}說：#{message}"  
  7.       _gruop.getClient onlineUsers[to], ->  
  8.         this.now.receiveMessage "#{self.now.username}對我說：#{message}"#重點：如何跟特定使用者通信  
  9.     else  
  10.       self.now.receiveMessage "[ERR]#{to}不在這個房間！"  
node.js nowjs 聊天室
上一篇: #頭條創作挑戰賽##notesDAMS中國資料智能管理峰會大資料、資料治理&amp;資料資産管理、信創資料庫、信創韻味、
下一篇: 周思源《正說三國人物——趙雲》