玩轉Node.js（四）-搭建簡單的聊天室
Nodejs好久沒有跟進了，最近想用它搞一個聊天室，然后便偶遇了socket.io這個東東，說是可以用它來簡單的實現實時雙向的基於事件的通訊機制。我便看了一些個教程使用它來搭建一個超級簡單的聊天室。
初始化項目
在電腦里新建一個文件夾，叫做“chatroom”，然后使用npm進行初始化：
$ npm init
然后根據提示以及相關信息一步一步輸入，當然也可以一路回車下去，之后會在項目里生成一個package.json文件，里面的信息如下：
1 $ cat package.json 2 { 3 "name": "chatroom", 4 "version": "1.0.0", 5 "description": "a room which lets people chat", 6 "main": "index.js", 7 "scripts": { 8 "test": "nothing" 9 }, 10 "author": "voidy", 11 "license": "ISC", 12 }
這個文件描述了項目的相關信息。
安裝socket.io
接下來，安裝socket.io：
1 $ npm install socket.io --save
安裝Socket.IO的時候，--save參數用於保存模塊依賴信息到package.json文件，安裝完后，打開package.json文件會看到里面多了一項內容：
1 "dependencies": { 2 "socket.io": "^1.2.1" 3 }
同時Socket.IO安裝在了node_modules文件夾下。
實現聊天-服務器端
首先我們來編寫服務器端程序，新建文件“index.js”，在里面導入如下模塊：
1 var http = require('http'); 2 var socketio = require('socket.io'); 3 var fs = require('fs');
第一行是導入http模塊，先前我們已經見過了，用於創建http server。
第二行是導入socket.io模塊，實現實時聊天必備的，不再贅述。
第三行是導入fs模塊，用於讀取文件。具體的一會你就會了解到。
通過http模塊創建app，在剛剛的代碼中加入如下語句：
1 var app = http.createServer(function(req, res) { 2 3 fs.readFile(__dirname + '/index.html', function (err, data) { 4 if (err) { 5 res.writeHead(500); 6 return res.end('Error loading index.html'); 7 } 8 res.writeHead(200); 9 res.write(data); 10 res.end(); 11 }); 12 }).listen(8888);
fs.readFile（）方法用於讀取文件，在這里讀取的是index.html文件，也就是一會即將要編寫的前端聊天室的展示頁面。
第8行是返回請求的狀態碼，第9行是返回讀取到的內容給瀏覽器。然后這個http server使用listen方法監聽8888端口。
接下來，就是使用socket.io來實現聊天的事件了。在剛剛的index.js文件的http server下面接着創建socket.io對象。
1 var io = socketio(app);
然后監聽connection事件，當瀏覽器連接到此Socket.IO服務時觸發該事件：
1 io.on('connection', function (socket) { 2 // 監聽瀏覽器端的chat事件 3 socket.on('chat', function (data) { 4 console.log(data); 5 io.emit('sendmsg', data); 6 }); 7 });
第4行用於將信息輸入到后台的顯示器，第5行用於將內容發送給客戶端，為了知道服務器是否啟動，我在后面又加了如下一句：
1 console.log("Server is running at http://localhost:8888")
至此，服務器端編碼完成。
實現聊天-客戶端
首先實現界面部分，僅僅有顯示消息記錄以及消息發送框，代碼如下：
1 <html> 2 <head> 3 <meta charset="utf-8"> 4 <title>Socket.IO chat</title> 5 <style> 6 * { margin: 0; padding: 0; box-sizing: border-box; } 7 body { font: 13px Helvetica, Arial; } 8 #form { background: #000; padding: 3px; position: fixed; bottom: 0; width: 100%; } 9 #form input { border: 0; padding: 10px; width: 90%; margin-right: .5%; } 10 #form button { width: 9%; background: rgb(130, 224, 255); border: none; padding: 10px; } 11 #messages { list-style-type: none; margin: 0; padding: 0; } 12 #messages li { padding: 5px 10px; } 13 #messages li:nth-child(odd) { background: #eee; } 14 </style> 15 <!-- 引入socket.io庫和jQuery庫 --> 16 <script src="https://cdn.socket.io/socket.io-1.2.1.js"></script> 17 <script src="http://code.jquery.com/jquery-1.11.1.js"></script> 18 </head> 19 <body> 20 <!-- 顯示消息記錄 --> 21 <ul id="messages"></ul> 22 23 <!-- 消息發送框 --> 24 <div id="form"> 25 <input id="m" autocomplete="off" /><button id="send">Send</button> 26 </div> 27 </body> 28 </html>
然后需要在里面加上JS來實現與服務器端的通信，將服務器端獲取的數據展示到客戶端，主要代碼如下：
<script> // 連接到Socket.IO服務器 var socket = io.connect(); $(function() { // 綁定發按鈕發送消息的事件 $('#send').on('click', function() { var data = $('#m').val(); // 創建chat事件並發送消息給服務器 // emit('event') 表示發送了一個event命令 // 使用io.on('event')接收對應事件的信息 // 所以客戶端服務器端需要使用socket.on('chat')接收聊天信息 socket.emit('chat', { msg: data }); $('#m').val(''); }); }); $(function() { // 接收消息並顯示到消息記錄框中 socket.on('sendmsg', function(msg) { $('#messages').append($('<li>').text(msg.msg)); }); }); </script>
此時，可以執行：
$ node index.js
然后在瀏覽器打開localhost:8888查看效果。
至此，一個簡陋的聊天室就實現了，有興趣的朋友可以在此基礎上進行擴展，實現功能更為復雜的聊天室。
項目代碼在github上：https://github.com/Voidly/chatroom。
PS:本博客歡迎轉發，但請注明博客地址及作者，因本人水平有限，若有不對之處，歡迎指出，謝謝~
博客地址：http://www.cnblogs.com/voidy/
博客新址：http://voidy.net
<。)#)))≦