快捷導(dǎo)航

玩轉(zhuǎn)NODE.JS（四）-搭建簡(jiǎn)單的聊天室的代碼

更新時(shí)間：2016年11月11日 14:03:02 作者：尛魚

本篇文章主要介紹了利用NODE.JS搭建簡(jiǎn)單的聊天室的代碼，有需要的可以了解一下。

Nodejs好久沒(méi)有跟進(jìn)了，最近想用它搞一個(gè)聊天室，然后便偶遇了socket.io這個(gè)東東，說(shuō)是可以用它來(lái)簡(jiǎn)單的實(shí)現(xiàn)實(shí)時(shí)雙向的基于事件的通訊機(jī)制。我便看了一些個(gè)教程使用它來(lái)搭建一個(gè)超級(jí)簡(jiǎn)單的聊天室。

初始化項(xiàng)目

在電腦里新建一個(gè)文件夾，叫做“chatroom”，然后使用npm進(jìn)行初始化：

$ npm init

然后根據(jù)提示以及相關(guān)信息一步一步輸入，當(dāng)然也可以一路回車下去，之后會(huì)在項(xiàng)目里生成一個(gè)package.json文件，里面的信息如下：

$ cat package.json
{
 "name": "chatroom",
 "version": "1.0.0",
 "description": "a room which lets people chat",
 "main": "index.js",
 "scripts": {
  "test": "nothing"
 },
 "author": "voidy",
 "license": "ISC",
 }

這個(gè)文件描述了項(xiàng)目的相關(guān)信息。

安裝socket.io

接下來(lái)，安裝socket.io：

 $ npm install socket.io --save

安裝Socket.IO的時(shí)候，--save參數(shù)用于保存模塊依賴信息到package.json文件，安裝完后，打開package.json文件會(huì)看到里面多了一項(xiàng)內(nèi)容：

 "dependencies": {
   "socket.io": "^1.2.1"
 }

同時(shí)Socket.IO安裝在了node_modules文件夾下。

實(shí)現(xiàn)聊天-服務(wù)器端

首先我們來(lái)編寫服務(wù)器端程序，新建文件“index.js”，在里面導(dǎo)入如下模塊：

 var http = require('http');      
 var socketio = require('socket.io'); 
 var fs = require('fs');

第一行是導(dǎo)入http模塊，先前我們已經(jīng)見過(guò)了，用于創(chuàng)建http server。

第二行是導(dǎo)入socket.io模塊，實(shí)現(xiàn)實(shí)時(shí)聊天必備的，不再贅述。

第三行是導(dǎo)入fs模塊，用于讀取文件。具體的一會(huì)你就會(huì)了解到。

通過(guò)http模塊創(chuàng)建app，在剛剛的代碼中加入如下語(yǔ)句：

var app = http.createServer(function(req, res) {
 
  fs.readFile(__dirname + '/index.html', function (err, data) {
    if (err) {
      res.writeHead(500);
      return res.end('Error loading index.html');
    }
    res.writeHead(200); 
    res.write(data);  
    res.end();
  });
}).listen(8888);

fs.readFile（）方法用于讀取文件，在這里讀取的是index.html文件，也就是一會(huì)即將要編寫的前端聊天室的展示頁(yè)面。

第8行是返回請(qǐng)求的狀態(tài)碼，第9行是返回讀取到的內(nèi)容給瀏覽器。然后這個(gè)http server使用listen方法監(jiān)聽8888端口。

接下來(lái)，就是使用socket.io來(lái)實(shí)現(xiàn)聊天的事件了。在剛剛的index.js文件的http server下面接著創(chuàng)建socket.io對(duì)象。

var io = socketio(app);

然后監(jiān)聽connection事件，當(dāng)瀏覽器連接到此Socket.IO服務(wù)時(shí)觸發(fā)該事件：

io.on('connection', function (socket) {
  // 監(jiān)聽瀏覽器端的chat事件
  socket.on('chat', function (data) {
    console.log(data);
    io.emit('sendmsg', data); 
  });
});

第4行用于將信息輸入到后臺(tái)的顯示器，第5行用于將內(nèi)容發(fā)送給客戶端，為了知道服務(wù)器是否啟動(dòng)，我在后面又加了如下一句：

console.log("Server is running at http://localhost:8888")

至此，服務(wù)器端編碼完成。

實(shí)現(xiàn)聊天-客戶端

首先實(shí)現(xiàn)界面部分，僅僅有顯示消息記錄以及消息發(fā)送框，代碼如下：

<html>
  <head>
    <meta charset="utf-8">
    <title>Socket.IO chat</title>
    <style>
      * { margin: 0; padding: 0; box-sizing: border-box; }
      body { font: 13px Helvetica, Arial; }
      #form { background: #000; padding: 3px; position: fixed; bottom: 0; width: 100%; }
      #form input { border: 0; padding: 10px; width: 90%; margin-right: .5%; }
      #form button { width: 9%; background: rgb(130, 224, 255); border: none; padding: 10px; }
      #messages { list-style-type: none; margin: 0; padding: 0; }
      #messages li { padding: 5px 10px; }
      #messages li:nth-child(odd) { background: #eee; }
    </style>
    <!-- 引入socket.io庫(kù)和jQuery庫(kù) -->
    <script src="https://cdn.socket.io/socket.io-1.2.1.js"></script>
    <script src="http://code.jquery.com/jquery-1.11.1.js"></script>
  </head>
  <body>
    <!-- 顯示消息記錄 -->
    <ul id="messages"></ul>

    <!-- 消息發(fā)送框 -->
    <div id="form">
      <input id="m" autocomplete="off" /><button id="send">Send</button>
    </div>
  </body>
</html>

然后需要在里面加上JS來(lái)實(shí)現(xiàn)與服務(wù)器端的通信，將服務(wù)器端獲取的數(shù)據(jù)展示到客戶端，主要代碼如下：

<script>
// 連接到Socket.IO服務(wù)器
var socket = io.connect();

$(function() {
 // 綁定發(fā)按鈕發(fā)送消息的事件
  $('#send').on('click', function() {
    var data = $('#m').val();
   // 創(chuàng)建chat事件并發(fā)送消息給服務(wù)器
    // emit('event') 表示發(fā)送了一個(gè)event命令
    // 使用io.on('event')接收對(duì)應(yīng)事件的信息
    // 所以客戶端服務(wù)器端需要使用socket.on('chat')接收聊天信息
    socket.emit('chat', { msg: data });
    $('#m').val('');
  });
});

$(function() {
  // 接收消息并顯示到消息記錄框中
  socket.on('sendmsg', function(msg) {
    $('#messages').append($('<li>').text(msg.msg));
  });
});
</script>

此時(shí)，可以執(zhí)行：