基于Node.js + WebSocket打造即時(shí)聊天程序嗨聊

更新時(shí)間：2016年11月29日 09:09:02 作者：劉哇勇

這篇文章主要介紹了基于Node.js + WebSocket打造即時(shí)聊天程序,有興趣的可以了解一下。

前端一直是一塊充滿驚喜的土地，不僅是那些富有創(chuàng)造性的頁面，還有那些驚贊的效果及不斷推出的新技術(shù)。像node.js這樣的后端開拓者直接將前端人員的能力擴(kuò)大到了后端。瞬間就有了一統(tǒng)天下的感覺，來往穿梭于前后端之間代碼敲得飛起，從此由前端晉升為'前后端'。

本文將使用Node.js加web socket協(xié)議打造一個(gè)網(wǎng)頁即時(shí)聊天程序，取名為HiChat，中文翻過來就是'嗨聊'，聽中文名有點(diǎn)像是專為寂寞單身男女打造的~

其中將會(huì)使用到express和socket.io兩個(gè)包模塊，下面會(huì)有介紹。

源碼

源碼可在頁面最后下載

本地運(yùn)行方法：

命令行運(yùn)行npm install
模塊下載成功后，運(yùn)行node server啟動(dòng)服務(wù)器
打開瀏覽器訪問localhost

下圖為效果預(yù)覽：

準(zhǔn)備工作

本文示例環(huán)境為Windows，Linux也就Node的安裝與命令行稍有區(qū)別，程序?qū)崿F(xiàn)部分基本與平臺(tái)無關(guān)。

Node相關(guān)

你需要在本機(jī)安裝Node.js（廢話）
多少需要一點(diǎn)Node.js的基礎(chǔ)知識(shí)，如果還未曾了解過Node.js，這里有一篇不錯(cuò)的入門教程

然后我們就可以開始創(chuàng)建一個(gè)簡(jiǎn)單的HTTP服務(wù)器啦。

類似下面非常簡(jiǎn)單的代碼，它創(chuàng)建了一個(gè)HTTP服務(wù)器并監(jiān)聽系統(tǒng)的80端口。

//node server example

//引入http模塊
var http = require('http'),
  //創(chuàng)建一個(gè)服務(wù)器
  server = http.createServer(function(req, res) {
    res.writeHead(200, {
      'Content-Type': 'text/plain'
    });
    res.write('hello world!');
    res.end();
  });
//監(jiān)聽80端口
server.listen(80);
console.log('server started');

將其保存為一個(gè)js文件比如server.js，然后從命令行運(yùn)行node server或者node server.js，服務(wù)器便可啟動(dòng)了，此刻我們可以在瀏覽器地址欄輸入localhost進(jìn)行訪問，也可以輸入本機(jī)IP127.0.0.1，都不用加端口，因?yàn)槲覀兎?wù)器監(jiān)聽的是默認(rèn)的80端口。當(dāng)然，如果你機(jī)子上面80端口被其他程序占用了，可以選擇其他端口比如8080，這樣訪問的時(shí)候需要顯示地加上端口號(hào)localhost:8080。

Express

首先通過npm進(jìn)行安裝

在我們的項(xiàng)目文件夾下打開命令行（tip: 按住Shift同時(shí)右擊，可以在右鍵菜單中找到'從此處打開命令行'選項(xiàng)）
在命令行中輸入 npm install express 回車進(jìn)行安裝
然后在server.js中通過require('express')將其引入到項(xiàng)目中進(jìn)行使用

express是node.js中管理路由響應(yīng)請(qǐng)求的模塊，根據(jù)請(qǐng)求的URL返回相應(yīng)的HTML頁面。這里我們使用一個(gè)事先寫好的靜態(tài)頁面返回給客戶端，只需使用express指定要返回的頁面的路徑即可。如果不用這個(gè)包，我們需要將HTML代碼與后臺(tái)JavaScript代碼寫在一起進(jìn)行請(qǐng)求的響應(yīng)，不太方便。

//返回一個(gè)簡(jiǎn)單的HTML內(nèi)容

server = http.createServer(function(req, res) {
  res.writeHead(200, {
    'Content-Type': 'text/html' //將返回類型由text/plain改為text/html
  });
  res.write('<h1>hello world!</h1>'); //返回HTML標(biāo)簽
  res.end();
});

在存放上一步創(chuàng)建的server.js文件的地方，我們新建一個(gè)文件夾名字為www用來存放我們的網(wǎng)頁文件，包括圖片以及前端的js文件等。假設(shè)已經(jīng)在www文件夾下寫好了一個(gè)index.html文件（將在下一步介紹，這一步你可以放一個(gè)空的HTML文件），則可以通過以下方式使用express將該頁面返回到瀏覽器?？梢钥吹捷^最開始，我們的服務(wù)器代碼簡(jiǎn)潔了不少。

//使用express模塊返回靜態(tài)頁面

var express = require('express'), //引入express模塊
  app = express(),
  server = require('http').createServer(app);
app.use('/', express.static(__dirname + '/www')); //指定靜態(tài)HTML文件的位置
server.listen(80);

其中有四個(gè)按鈕，分別是設(shè)置字體顏色，發(fā)送表情，發(fā)送圖片和清除記錄，將會(huì)在下面介紹其實(shí)現(xiàn)

socket.io

Node.js中使用socket的一個(gè)包。使用它可以很方便地建立服務(wù)器到客戶端的sockets連接，發(fā)送事件與接收特定事件。

同樣通過npm進(jìn)行安裝 npm install socket.io 。安裝后在node_modules文件夾下新生成了一個(gè)socket.io文件夾，其中我們可以找到一個(gè)socket.io.js文件。將它引入到HTML頁面，這樣我們就可以在前端使用socket.io與服務(wù)器進(jìn)行通信了。

<script src="/socket.io/socket.io.js"></script>

同時(shí)服務(wù)器端的server.js里跟使用express一樣，也要通過require('socket.io')將其引入到項(xiàng)目中，這樣就可以在服務(wù)器端使用socket.io了。

使用socket.io，其前后端句法是一致的，即通過socket.emit()來激發(fā)一個(gè)事件，通過socket.on()來偵聽和處理對(duì)應(yīng)事件。這兩個(gè)事件通過傳遞的參數(shù)進(jìn)行通信。具體工作模式可以看下面這個(gè)示例。

比如我們?cè)趇ndex.html里面有如下JavaScript代碼（假設(shè)你已經(jīng)在頁面放了一個(gè)ID為sendBtn的按鈕）：

<script type="text/javascript">
 var socket=io.connect(),//與服務(wù)器進(jìn)行連接
 button=document.getElementById('sendBtn');
 button.onclick=function(){
 socket.emit('foo', 'hello');//發(fā)送一個(gè)名為foo的事件，并且傳遞一個(gè)字符串?dāng)?shù)據(jù)‘hello'
 }
</script>

上述代碼首先建立與服務(wù)器的連接，然后得到一個(gè)socket實(shí)例。之后如果頁面上面一個(gè)ID為sendBtn的按鈕被點(diǎn)擊的話，我們就通過這個(gè)socket實(shí)例發(fā)起一個(gè)名為foo的事件，同時(shí)傳遞一個(gè)hello字符串信息到服務(wù)器。

與此同時(shí)，我們需要在服務(wù)器端寫相應(yīng)的代碼來處理這個(gè)foo事件并接收傳遞來的數(shù)據(jù)。

為此，我們?cè)趕erver.js中可以這樣寫：

//服務(wù)器及頁面響應(yīng)部分
var express = require('express'),
  app = express(),
  server = require('http').createServer(app),
  io = require('socket.io').listen(server); //引入socket.io模塊并綁定到服務(wù)器
app.use('/', express.static(__dirname + '/www'));
server.listen(80);

//socket部分
io.on('connection', function(socket) {
  //接收并處理客戶端發(fā)送的foo事件
  socket.on('foo', function(data) {
    //將消息輸出到控制臺(tái)
    console.log(data);
  })
});

現(xiàn)在Ctrl+C關(guān)閉之前啟動(dòng)的服務(wù)器，再次輸入node server啟動(dòng)服務(wù)器運(yùn)行新代碼查看效果，一切正常的話你會(huì)在點(diǎn)擊了頁面的按扭后，在命令行窗口里看到輸出的'hello'字符串。

一如之前所說，socket.io在前后端的句法是一致的，所以相反地，從服務(wù)器發(fā)送事件到客戶端，在客戶端接收并處理消息也是顯而易見的事件了。這里只是簡(jiǎn)單介紹，具體下面會(huì)通過發(fā)送聊天消息進(jìn)一步介紹。

基本頁面

有了上面一些基礎(chǔ)的了解，下面可以進(jìn)入聊天程序功能的開發(fā)了。

首先我們構(gòu)建主頁面。因?yàn)槭潜容^大眾化的應(yīng)用了，界面不用多想，腦海中已經(jīng)有大致的雛形，它有一個(gè)呈現(xiàn)消息的主窗體，還有一個(gè)輸入消息的文本框，同時(shí)需要一個(gè)發(fā)送消息的按鈕，這三個(gè)是必備的。

另外就是，這里還準(zhǔn)備實(shí)現(xiàn)以下四個(gè)功能，所以界面上還有設(shè)置字體顏色，發(fā)送表情，發(fā)送圖片和清除記錄四個(gè)按鈕。

最后的頁面也就是先前截圖展示的那們，而代碼如下：

www/index.html

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="author" content="Wayou">
    <meta name="description" content="hichat | a simple chat application built with node.js and websocket">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>hichat</title>
    <link rel="stylesheet" href="styles/main.css">
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <link rel="icon" href="favicon.ico" type="image/x-icon">
  </head>
  <body>
    <div class="wrapper">
      <div class="banner">
        <h1>HiChat :)</h1>
        <span id="status"></span>
      </div>
      <div id="historyMsg">
      </div>
      <div class="controls" >
        <div class="items">
          <input id="colorStyle" type="color" placeHolder='#000' title="font color" />
          <input id="emoji" type="button" value="emoji" title="emoji" />
          <label for="sendImage" class="imageLable">
            <input type="button" value="image" />
            <input id="sendImage" type="file" value="image"/>
          </label>
          <input id="clearBtn" type="button" value="clear" title="clear screen" />
        </div>
        <textarea id="messageInput" placeHolder="enter to send"></textarea>
        <input id="sendBtn" type="button" value="SEND">
        <div id="emojiWrapper">
        </div>
      </div>
    </div>
    <div id="loginWrapper">
      <p id="info">connecting to server...</p>
      <div id="nickWrapper">
        <input type="text" placeHolder="nickname" id="nicknameInput" />
        <input type="button" value="OK" id="loginBtn" />
      </div>
    </div>
    <script src="/socket.io/socket.io.js"></script>
    <script src="scripts/hichat.js"></script>
  </body>
</html>

樣式文件 www/styles/main.css

html, body {
  margin: 0;
  background-color: #efefef;
  font-family: sans-serif;
}
.wrapper {
  width: 500px;
  height: 640px;
  padding: 5px;
  margin: 0 auto;
  background-color: #ddd;
}
#loginWrapper {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(5, 5, 5, .6);
  text-align: center;
  color: #fff;
  display: block;
  padding-top: 200px;
}
#nickWrapper {
  display: none;
}
.banner {
  height: 80px;
  width: 100%;
}
.banner p {
  float: left;
  display: inline-block;
}
.controls {
  height: 100px;
  margin: 5px 0px;
  position: relative;
}
#historyMsg {
  height: 400px;
  background-color: #fff;
  overflow: auto;
  padding: 2px;
}
#historyMsg img {
  max-width: 99%;
}
.timespan {
  color: #ddd;
}
.items {
  height: 30px;
}
#colorStyle {
  width: 50px;
  border: none;
  padding: 0;
}
/*custom the file input*/

.imageLable {
  position: relative;
}
#sendImage {
  position: absolute;
  width: 52px;
  left: 0;
  opacity: 0;
  overflow: hidden;
}
/*end custom file input*/

#messageInput {
  width: 440px;
  max-width: 440px;
  height: 90px;
  max-height: 90px;
}
#sendBtn {
  width: 50px;
  height: 96px;
  float: right;
}
#emojiWrapper {
  display: none;
  width: 500px;
  bottom: 105px;
  position: absolute;
  background-color: #aaa;
  box-shadow: 0 0 10px #555;
}
#emojiWrapper img {
  margin: 2px;
  padding: 2px;
  width: 25px;
  height: 25px;
}
#emojiWrapper img:hover {
  background-color: blue;
}
.emoji{
  display: inline;
}
footer {
  text-align: center;
}

為了讓項(xiàng)目有一個(gè)良好的目錄結(jié)構(gòu)便于管理，這里在www文件夾下又新建了一個(gè)styles文件夾存放樣式文件main.css，然后新建一個(gè)scripts文件夾存放前端需要使用的js文件比如hichat.js（我們前端所有的js代碼會(huì)放在這個(gè)文件中），而我們的服務(wù)器js文件server.js位置不變還是放在最外層。

同時(shí)再新建一個(gè)content文件夾用于存放其他資源比如圖片等，其中content文件夾里再建一個(gè)emoji文件夾用于存入表情gif圖，后面會(huì)用到。最后我們項(xiàng)目的目錄結(jié)構(gòu)應(yīng)該是這樣的了：

├─node_modules
└─www
  ├─content
  │ └─emoji
  ├─scripts
  └─styles

此刻打開頁面你看到的是一個(gè)淡黑色的遮罩層，而接下來我們要實(shí)現(xiàn)的是用戶昵稱的輸入與服務(wù)器登入。這個(gè)遮罩層用于顯示連接到服務(wù)器的狀態(tài)信息，而當(dāng)連接完成之后，會(huì)出現(xiàn)一個(gè)輸入框用于昵稱輸入。

上面HTML代碼里已經(jīng)看到，我們將www/scripts/hichat.js文件已經(jīng)引入到頁面了，下面開始寫一些基本的前端js開始實(shí)現(xiàn)連接功能。

定義一個(gè)全局變量用于我們整個(gè)程序的開發(fā)HiChat，同時(shí)使用window.onload在頁面準(zhǔn)備好之后實(shí)例化HiChat，調(diào)用其init方法運(yùn)行我們的程序。

www/scripts/Hichat.js

window.onload = function() {
  //實(shí)例并初始化我們的hichat程序
  var hichat = new HiChat();
  hichat.init();
};

//定義我們的hichat類
var HiChat = function() {
  this.socket = null;
};

//向原型添加業(yè)務(wù)方法
HiChat.prototype = {
  init: function() {//此方法初始化程序
    var that = this;
    //建立到服務(wù)器的socket連接
    this.socket = io.connect();
    //監(jiān)聽socket的connect事件，此事件表示連接已經(jīng)建立
    this.socket.on('connect', function() {
      //連接到服務(wù)器后，顯示昵稱輸入框
      document.getElementById('info').textContent = 'get yourself a nickname :)';
      document.getElementById('nickWrapper').style.display = 'block';
      document.getElementById('nicknameInput').focus();
    });
  }
};

上面的代碼定義了整個(gè)程序需要使用的類HiChat，之后我們處理消息顯示消息等所有業(yè)務(wù)邏輯均寫在這個(gè)類里面。

首先定義了一個(gè)程序的初始化方法，這里面初始化socket，監(jiān)聽連接事件，一旦連接到服務(wù)器，便顯示昵稱輸入框。當(dāng)用戶輸入昵稱后，便可以在服務(wù)器后臺(tái)接收到然后進(jìn)行下一步的處理了。

設(shè)置昵稱

我們要求連接的用戶需要首先設(shè)置一個(gè)昵稱，且這個(gè)昵稱還要唯一，也就是不能與別人同名。一是方便用戶區(qū)分，二是為了統(tǒng)計(jì)在線人數(shù)，同時(shí)也方便維護(hù)一個(gè)保存所有用戶昵稱的數(shù)組。

為此在后臺(tái)server.js中，我們創(chuàng)建一個(gè)名叫users的全局?jǐn)?shù)組變量，當(dāng)一個(gè)用戶設(shè)置好昵稱發(fā)送到服務(wù)器的時(shí)候，將昵稱壓入users數(shù)組。同時(shí)注意，如果用戶斷線離開了，也要相應(yīng)地從users數(shù)組中移除以保證數(shù)據(jù)的正確性。

在前臺(tái)，輸入昵稱點(diǎn)擊OK提交后，我們需要發(fā)起一個(gè)設(shè)置昵稱的事件以便服務(wù)器偵聽到。將以下代碼添加到之前的init方法中。

www/scripts/hichat.js

//昵稱設(shè)置的確定按鈕
document.getElementById('loginBtn').addEventListener('click', function() {
  var nickName = document.getElementById('nicknameInput').value;
  //檢查昵稱輸入框是否為空
  if (nickName.trim().length != 0) {
    //不為空，則發(fā)起一個(gè)login事件并將輸入的昵稱發(fā)送到服務(wù)器
    that.socket.emit('login', nickName);
  } else {
    //否則輸入框獲得焦點(diǎn)
    document.getElementById('nicknameInput').focus();
  };
}, false);

server.js

//服務(wù)器及頁面部分
var express = require('express'),
  app = express(),
  server = require('http').createServer(app),
  io = require('socket.io').listen(server),
  users=[];//保存所有在線用戶的昵稱
app.use('/', express.static(__dirname + '/www'));
server.listen(80);
//socket部分
io.on('connection', function(socket) {
  //昵稱設(shè)置
  socket.on('login', function(nickname) {
    if (users.indexOf(nickname) > -1) {
      socket.emit('nickExisted');
    } else {
      socket.userIndex = users.length;
      socket.nickname = nickname;
      users.push(nickname);
      socket.emit('loginSuccess');
      io.sockets.emit('system', nickname); //向所有連接到服務(wù)器的客戶端發(fā)送當(dāng)前登陸用戶的昵稱 
    };
  });
});

需要解釋一下的是，在connection事件的回調(diào)函數(shù)中，socket表示的是當(dāng)前連接到服務(wù)器的那個(gè)客戶端。所以代碼socket.emit('foo')則只有自己收得到這個(gè)事件，而socket.broadcast.emit('foo')則表示向除自己外的所有人發(fā)送該事件，另外，上面代碼中，io表示服務(wù)器整個(gè)socket連接，所以代碼io.sockets.emit('foo')表示所有人都可以收到該事件。

上面代碼先判斷接收到的昵稱是否已經(jīng)存在在users中，如果存在，則向自己發(fā)送一個(gè)nickExisted事件，在前端接收到這個(gè)事件后我們顯示一條信息通知用戶。

將下面代碼添加到hichat.js的inti方法中。

www/scripts/hichat.js

this.socket.on('nickExisted', function() {
   document.getElementById('info').textContent = '!nickname is taken, choose another pls'; //顯示昵稱被占用的提示
 });

如果昵稱沒有被其他用戶占用，則將這個(gè)昵稱壓入users數(shù)組，同時(shí)將其作為一個(gè)屬性存到當(dāng)前socket變量中，并且將這個(gè)用戶在數(shù)組中的索引（因?yàn)槭菙?shù)組最后一個(gè)元素，所以索引就是數(shù)組的長(zhǎng)度users.length）也作為屬性保存到socket中，后面會(huì)用到。最后向自己發(fā)送一個(gè)loginSuccess事件，通知前端登陸成功，前端接收到這個(gè)成功消息后將灰色遮罩層移除顯示聊天界面。

將下面代碼添加到hichat.js的inti方法中。

www/scripts/hichat.js

this.socket.on('loginSuccess', function() {
   document.title = 'hichat | ' + document.getElementById('nicknameInput').value;
   document.getElementById('loginWrapper').style.display = 'none';//隱藏遮罩層顯聊天界面
   document.getElementById('messageInput').focus();//讓消息輸入框獲得焦點(diǎn)
 });

在線統(tǒng)計(jì)

這里實(shí)現(xiàn)顯示在線用戶數(shù)及在聊天主界面中以系統(tǒng)身份顯示用戶連接離開等信息。

上面server.js中除了loginSuccess事件，后面還有一句代碼，通過io.sockets.emit 向所有用戶發(fā)送了一個(gè)system事件，傳遞了剛登入用戶的昵稱，所有人接收到這個(gè)事件后，會(huì)在聊天窗口顯示一條系統(tǒng)消息'某某加入了聊天室'。同時(shí)考慮到在前端我們無法得知用戶是進(jìn)入還是離開，所以在這個(gè)system事件里我們多傳遞一個(gè)數(shù)據(jù)來表明用戶是進(jìn)入還是離開。

將server.js中l(wèi)ogin事件更改如下：

server.js

socket.on('login', function(nickname) {
   if (users.indexOf(nickname) > -1) {
     socket.emit('nickExisted');
   } else {
     socket.userIndex = users.length;
     socket.nickname = nickname;
     users.push(nickname);
     socket.emit('loginSuccess');
     io.sockets.emit('system', nickname, users.length, 'login');
   };
 });

較之前，多傳遞了一個(gè)login字符串。

同時(shí)再添加一個(gè)用戶離開的事件，這個(gè)可能通過socket.io自帶的disconnect事件完成，當(dāng)一個(gè)用戶斷開連接，disconnect事件就會(huì)觸發(fā)。在這個(gè)事件中，做兩件事情，一是將用戶從users數(shù)組中刪除，一是發(fā)送一個(gè)system事件通知所有人'某某離開了聊天室'。

將以下代碼添加到server.js中connection的回調(diào)函數(shù)中。

server.js

//斷開連接的事件
socket.on('disconnect', function() {
  //將斷開連接的用戶從users中刪除
  users.splice(socket.userIndex, 1);
  //通知除自己以外的所有人
  socket.broadcast.emit('system', socket.nickname, users.length, 'logout');
});

上面代碼通過JavaScript數(shù)組的splice方法將當(dāng)前斷開連接的用戶從users數(shù)組中刪除，這里我們看到之前保存的用戶索引被使用了。同時(shí)發(fā)送和用戶連接時(shí)一樣的system事件通知所有人'某某離開了'，為了讓前端知道是離開事件，所以發(fā)送了一個(gè)'logout'字符串。

下面開始前端的實(shí)現(xiàn)，也就是接收system事件。

在hichat.js中，將以下代碼添加到init方法中。

www/scripts/hichat.js

this.socket.on('system', function(nickName, userCount, type) {
   //判斷用戶是連接還是離開以顯示不同的信息
   var msg = nickName + (type == 'login' ? ' joined' : ' left');
   var p = document.createElement('p');
   p.textContent = msg;
   document.getElementById('historyMsg').appendChild(p);
   //將在線人數(shù)顯示到頁面頂部
   document.getElementById('status').textContent = userCount + (userCount > 1 ? ' users' : ' user') + ' online';
 });

現(xiàn)在運(yùn)行程序，打開多個(gè)瀏覽器標(biāo)簽，然后登陸離開，你就可以看到相應(yīng)的系統(tǒng)提示消息了。

發(fā)送消息

用戶連接以及斷開我們需要顯示系統(tǒng)消息，用戶還要頻繁的發(fā)送聊天消息，所以可以考慮將消息顯示到頁面這個(gè)功能單獨(dú)寫一個(gè)函數(shù)方便我們調(diào)用。為此我們向HiChat類中添加一個(gè)_displayNewMsg的方法，它接收要顯示的消息，消息來自誰，以及一個(gè)顏色共三個(gè)參數(shù)。因?yàn)槲覀兿胂到y(tǒng)消息區(qū)別于普通用戶的消息，所以增加一個(gè)顏色參數(shù)。同時(shí)這個(gè)參數(shù)也方便我們之后實(shí)現(xiàn)讓用戶自定義文本顏色做準(zhǔn)備。

將以下代碼添加到的我的HiChat類當(dāng)中。

www/scripts/hichat.js

//向原型添加業(yè)務(wù)方法
HiChat.prototype = {
  init: function() { //此方法初始化程序
    //...
  },
  _displayNewMsg: function(user, msg, color) {
    var container = document.getElementById('historyMsg'),
      msgToDisplay = document.createElement('p'),
      date = new Date().toTimeString().substr(0, 8);
    msgToDisplay.style.color = color || '#000';
    msgToDisplay.innerHTML = user + '<span class="timespan">(' + date + '): </span>' + msg;
    container.appendChild(msgToDisplay);
    container.scrollTop = container.scrollHeight;
  }
};

在_displayNewMsg方法中，我們還向消息添加了一個(gè)日期。我們也判斷了該方法在調(diào)用時(shí)有沒有傳遞顏色參數(shù)，沒有傳遞顏色的話默認(rèn)使用#000即黑色。

同時(shí)修改我們?cè)趕ystem事件中顯示系統(tǒng)消息的代碼，讓它調(diào)用這個(gè)_displayNewMsg方法。

www/scripts/hichat.js

this.socket.on('system', function(nickName, userCount, type) {
  var msg = nickName + (type == 'login' ? ' joined' : ' left');
  //指定系統(tǒng)消息顯示為紅色
  that._displayNewMsg('system ', msg, 'red');
  document.getElementById('status').textContent = userCount + (userCount > 1 ? ' users' : ' user') + ' online';
});

現(xiàn)在的效果如下：

有了這個(gè)顯示消息的方法后，下面就開始實(shí)現(xiàn)用戶之間的聊天功能了。

做法也很簡(jiǎn)單，如果你掌握了上面所描述的emit發(fā)送事件，on接收事件，那么用戶聊天消息的發(fā)送接收也就輕車熟路了。

首先為頁面的發(fā)送按鈕寫一個(gè)click事件處理程序，我們通過addEventListner來監(jiān)聽這個(gè)click事件，當(dāng)用戶點(diǎn)擊發(fā)送的時(shí)候，先檢查輸入框是否為空，如果不為空，則向服務(wù)器發(fā)送postMsg事件，將用戶輸入的聊天文本發(fā)送到服務(wù)器，由服務(wù)器接收并分發(fā)到除自己外的所有用戶。

將以下代碼添加到hichat.js的inti方法中。

www/scripts/hichat.js

document.getElementById('sendBtn').addEventListener('click', function() {
  var messageInput = document.getElementById('messageInput'),
    msg = messageInput.value;
  messageInput.value = '';
  messageInput.focus();
  if (msg.trim().length != 0) {
    that.socket.emit('postMsg', msg); //把消息發(fā)送到服務(wù)器
    that._displayNewMsg('me', msg); //把自己的消息顯示到自己的窗口中
  };
}, false);

在server.js中添加代碼以接收postMsg事件。

server.js

io.on('connection', function(socket) {
  //其他代碼。。。

  //接收新消息
  socket.on('postMsg', function(msg) {
    //將消息發(fā)送到除自己外的所有用戶
    socket.broadcast.emit('newMsg', socket.nickname, msg);
  });
});

然后在客戶端接收服務(wù)器發(fā)送的newMsg事件，并將聊天消息顯示到頁面。

將以下代碼顯示添加到hichat.js的init方法中了。

this.socket.on('newMsg', function(user, msg) {
  that._displayNewMsg(user, msg);
});

運(yùn)行程序，現(xiàn)在可以發(fā)送聊天消息了。

發(fā)送圖片

上面已經(jīng)實(shí)現(xiàn)了基本的聊天功能了，進(jìn)一步，如果我們還想讓用戶可以發(fā)送圖片，那程序便更加完美了。

圖片不同于文字，但通過將圖片轉(zhuǎn)化為字符串形式后，便可以像發(fā)送普通文本消息一樣發(fā)送圖片了，只是在顯示的時(shí)候?qū)⑺€原為圖片。

在這之前，我們已經(jīng)將圖片按鈕在頁面放好了，其實(shí)是一個(gè)文件類型的input，下面只需在它身上做功夫便可。

用戶點(diǎn)擊圖片按鈕后，彈出文件選擇窗口供用戶選擇圖片。之后我們可以在JavaScript代碼中使用FileReader來將圖片讀取為base64格式的字符串形式進(jìn)行發(fā)送。而base64格式的圖片直接可以指定為圖片的src，這樣就可以將圖片用img標(biāo)簽顯示在頁面了。

為此我們監(jiān)聽圖片按鈕的change事件，一但用戶選擇了圖片，便顯示到自己的屏幕上同時(shí)讀取為文本發(fā)送到服務(wù)器。

將以下代碼添加到hichat.js的init方法中。

www/scripts/hichat.js

document.getElementById('sendImage').addEventListener('change', function() {
  //檢查是否有文件被選中
   if (this.files.length != 0) {
    //獲取文件并用FileReader進(jìn)行讀取
     var file = this.files[0],
       reader = new FileReader();
     if (!reader) {
       that._displayNewMsg('system', '!your browser doesn\'t support fileReader', 'red');
       this.value = '';
       return;
     };
     reader.onload = function(e) {
      //讀取成功，顯示到頁面并發(fā)送到服務(wù)器
       this.value = '';
       that.socket.emit('img', e.target.result);
       that._displayImage('me', e.target.result);
     };
     reader.readAsDataURL(file);
   };
 }, false);

上面圖片讀取成功后，調(diào)用_displayNImage方法將圖片顯示在自己的屏幕同時(shí)向服務(wù)器發(fā)送了一個(gè)img事件，在server.js中，我們通過這個(gè)事件來接收并分發(fā)圖片到每個(gè)用戶。同時(shí)也意味著我們還要在前端寫相應(yīng)的代碼來接收。

這個(gè)_displayNImage還沒有實(shí)現(xiàn)，將會(huì)在下面介紹。

將以下代碼添加到server.js的socket回調(diào)函數(shù)中。

server.js

//接收用戶發(fā)來的圖片
 socket.on('img', function(imgData) {
  //通過一個(gè)newImg事件分發(fā)到除自己外的每個(gè)用戶
   socket.broadcast.emit('newImg', socket.nickname, imgData);
 });
 同時(shí)向hichat.js的init方法添加以下代碼以接收顯示圖片。

 this.socket.on('newImg', function(user, img) {
   that._displayImage(user, img);
 });

有個(gè)問題就是如果圖片過大，會(huì)破壞整個(gè)窗口的布局，或者會(huì)出現(xiàn)水平滾動(dòng)條，所以我們對(duì)圖片進(jìn)行樣式上的設(shè)置讓它最多只能以聊天窗口的99%寬度來顯示，這樣過大的圖片就會(huì)自己縮小了。

#historyMsg img {
  max-width: 99%;
}

但考慮到縮小后的圖片有可能失真，用戶看不清，我們需要提供一個(gè)方法讓用戶可以查看原尺寸大小的圖片，所以將圖片用一個(gè)鏈接進(jìn)行包裹，當(dāng)點(diǎn)擊圖片的時(shí)候我們打開一個(gè)新的窗口頁面，并將圖片按原始大小呈現(xiàn)到這個(gè)新頁面中讓用戶查看。

所以最后我們實(shí)現(xiàn)的_displayNImage方法應(yīng)該是這樣的。

將以下代碼添加到hichat.js的HiChat類中。

www/scripts/hichat.js

_displayImage: function(user, imgData, color) {
  var container = document.getElementById('historyMsg'),
    msgToDisplay = document.createElement('p'),
    date = new Date().toTimeString().substr(0, 8);
  msgToDisplay.style.color = color || '#000';
  msgToDisplay.innerHTML = user + '<span class="timespan">(' + date + '): </span> <br/>' + '<a href="' + imgData + '" target="_blank"><img src="' + imgData + '"/></a>';
  container.appendChild(msgToDisplay);
  container.scrollTop = container.scrollHeight;
}

再次啟動(dòng)服務(wù)器打開程序，我們可以發(fā)送圖片了。

發(fā)送表情

文字總是很難表達(dá)出說話時(shí)的面部表情的，于是表情就誕生了。

前面已經(jīng)介紹過如何發(fā)送圖片了，嚴(yán)格來說，表情也是圖片，但它有特殊之處，因?yàn)楸砬榭梢源┎逶谖淖种幸徊l(fā)送，所以就不能像處理圖片那樣來處理表情了。

根據(jù)以往的經(jīng)驗(yàn)，其他聊天程序是把表情轉(zhuǎn)為符號(hào)，比如我想發(fā)笑臉，并且規(guī)定':)'這個(gè)符號(hào)代碼笑臉表情，然后數(shù)據(jù)傳輸過程中其實(shí)轉(zhuǎn)輸?shù)氖且粋€(gè)冒號(hào)加右括號(hào)的組合，當(dāng)每個(gè)客戶端接收到消息后，從文字當(dāng)中將這些表情符號(hào)提取出來，再用gif圖片替換，這樣呈現(xiàn)到頁面我們就看到了表情加文字的混排了。

你好,王尼瑪[emoji:23]------>你好，王尼瑪

上面形象地展示了我們程序中表情的使用，可以看出我規(guī)定了一種格式來代表表情，[emoji:xx]，中括號(hào)括起來然后'emoji'加個(gè)冒號(hào)，后面跟一個(gè)數(shù)字，這個(gè)數(shù)字表示某個(gè)gif圖片的編號(hào)。程序中，如果我們點(diǎn)擊表情按扭，然后呈現(xiàn)所有可用的表情圖片，當(dāng)用戶選擇一個(gè)表情后，生成對(duì)應(yīng)的代碼插入到當(dāng)前待發(fā)送的文字消息中。發(fā)出去后，每個(gè)人接收到的也是代碼形式的消息，只是在將消息顯示到頁面前，我們將表情代碼提取出來，獲取圖片編號(hào)，然后用相應(yīng)的圖片替換。

首先得將所有可用的表情圖片顯示到一個(gè)小窗口，這個(gè)窗口會(huì)在點(diǎn)擊了表情按鈕后顯示如下圖，在HTML代碼中已經(jīng)添加好了這個(gè)窗口了，下面只需實(shí)現(xiàn)代碼部分。

我們使用兔斯基作為我們聊天程序的表情包。可以看到，有很多張gif圖，如果手動(dòng)編寫的話，要花一些功夫，不斷地寫<img src='xx.gif'/>，所以考慮將這個(gè)工作交給代碼來自動(dòng)完成，寫一個(gè)方法來初始化所有表情。

為此將以下代碼添加到HiChat類中，并在init方法中調(diào)用這個(gè)方法。

www/scripts/hichat.js

_initialEmoji: function() {
  var emojiContainer = document.getElementById('emojiWrapper'),
    docFragment = document.createDocumentFragment();
  for (var i = 69; i > 0; i--) {
    var emojiItem = document.createElement('img');
    emojiItem.src = '../content/emoji/' + i + '.gif';
    emojiItem.title = i;
    docFragment.appendChild(emojiItem);
  };
  emojiContainer.appendChild(docFragment);
}

同時(shí)將以下代碼添加到hichat.js的init方法中。

www/scripts/hichat.js

this._initialEmoji();
 document.getElementById('emoji').addEventListener('click', function(e) {
   var emojiwrapper = document.getElementById('emojiWrapper');
   emojiwrapper.style.display = 'block';
   e.stopPropagation();
 }, false);
 document.body.addEventListener('click', function(e) {
   var emojiwrapper = document.getElementById('emojiWrapper');
   if (e.target != emojiwrapper) {
     emojiwrapper.style.display = 'none';
   };
 });

上面向頁面添加了兩個(gè)單擊事件，一是表情按鈕單擊顯示表情窗口，二是點(diǎn)擊頁面其他地方關(guān)閉表情窗口。

現(xiàn)在要做的就是，具體到某個(gè)表情被選中后，需要獲取被選中的表情，然后轉(zhuǎn)換為相應(yīng)的表情代碼插入到消息框中。

為此我們?cè)賹懸粋€(gè)這些圖片的click事件處理程序。將以下代碼添加到hichat.js的inti方法中。

www/scripts/hichat.js

document.getElementById('emojiWrapper').addEventListener('click', function(e) {
  //獲取被點(diǎn)擊的表情
  var target = e.target;
  if (target.nodeName.toLowerCase() == 'img') {
    var messageInput = document.getElementById('messageInput');
    messageInput.focus();
    messageInput.value = messageInput.value + '[emoji:' + target.title + ']';
  };
}, false);

現(xiàn)在表情選中后，消息輸入框中可以得到相應(yīng)的代碼了。

之后的發(fā)送也普通消息發(fā)送沒區(qū)別，因?yàn)橹耙呀?jīng)實(shí)現(xiàn)了文本消息的發(fā)送了，所以這里不用再實(shí)現(xiàn)什么，只是需要更改一下之前我們用來顯示消息的代碼，首先判斷消息文本中是否含有表情符號(hào)，如果有，則轉(zhuǎn)換為圖片，最后再顯示到頁面。

為此我們寫一個(gè)方法接收文本消息為參數(shù)，用正則搜索其中的表情符號(hào)，將其替換為img標(biāo)簽，最后返回處理好的文本消息。

將以下代碼添加到HiChat類中。

www/scripts/hichat.js

_showEmoji: function(msg) {
  var match, result = msg,
    reg = /\[emoji:\d+\]/g,
    emojiIndex,
    totalEmojiNum = document.getElementById('emojiWrapper').children.length;
  while (match = reg.exec(msg)) {
    emojiIndex = match[0].slice(7, -1);
    if (emojiIndex > totalEmojiNum) {
      result = result.replace(match[0], '[X]');
    } else {
      result = result.replace(match[0], '<img class="emoji" src="../content/emoji/' + emojiIndex + '.gif" />');
    };
  };
  return result;
}

現(xiàn)在去修改之前我們顯示消息的_displayNewMsg方法，讓它在顯示消息之前調(diào)用這個(gè)_showEmoji方法。

_displayNewMsg: function(user, msg, color) {
   var container = document.getElementById('historyMsg'),
     msgToDisplay = document.createElement('p'),
     date = new Date().toTimeString().substr(0, 8),
     //將消息中的表情轉(zhuǎn)換為圖片
     msg = this._showEmoji(msg);
   msgToDisplay.style.color = color || '#000';
   msgToDisplay.innerHTML = user + '<span class="timespan">(' + date + '): </span>' + msg;
   container.appendChild(msgToDisplay);
   container.scrollTop = container.scrollHeight;
 }

下面是實(shí)現(xiàn)后的效果：

主要功能已經(jīng)完成得差不多了，為了讓程序更加人性與美觀，可以加入一個(gè)修改文字顏色的功能，以及鍵盤快捷鍵操作的支持，這也是一般聊天程序都有的功能，回車即可以發(fā)送消息。

文字顏色

萬幸，HTML5新增了一個(gè)專門用于顏色選取的input標(biāo)簽，并且Chrome對(duì)它的支持非常之贊，直接彈出系統(tǒng)的顏色拾取窗口。

IE及FF中均是一個(gè)普通的文本框，不過不影響使用，只是用戶只能通過輸入具體的顏色值來進(jìn)行顏色設(shè)置，沒有Chrome里面那么方便也直觀。

之前我們的_displayNewMsg方法可以接收一個(gè)color參數(shù)，現(xiàn)在要做的就是每次發(fā)送消息到服務(wù)器的時(shí)候，多加一個(gè)color參數(shù)就可以了，同時(shí)，在顯示消息時(shí)調(diào)用_displayNewMsg的時(shí)候?qū)⑦@個(gè)color傳遞過去。

下面是修改hichat.js中消息發(fā)送按鈕代碼的示例：

document.getElementById('sendBtn').addEventListener('click', function() {
  var messageInput = document.getElementById('messageInput'),
    msg = messageInput.value,
    //獲取顏色值
    color = document.getElementById('colorStyle').value;
  messageInput.value = '';
  messageInput.focus();
  if (msg.trim().length != 0) {
    //顯示和發(fā)送時(shí)帶上顏色值參數(shù)
    that.socket.emit('postMsg', msg, color);
    that._displayNewMsg('me', msg, color);
  };
}, false);

同時(shí)修改hichat.js中接收消息的代碼，讓它接收顏色值

this.socket.on('newMsg', function(user, msg, color) {
   that._displayNewMsg(user, msg, color);
 });

這只是展示了發(fā)送按鈕的修改，改動(dòng)非常小，只是每次消息發(fā)送時(shí)獲取一下顏色值，同時(shí)emit事件到服務(wù)器的時(shí)候也帶上這個(gè)顏色值，這樣前端在顯示時(shí)就可以根據(jù)這個(gè)顏色值為每個(gè)不兩只用戶顯示他們自己設(shè)置的顏色了。剩下的就是按相同的做法把發(fā)送圖片時(shí)也加上顏色，這里省略。

最后效果：

按鍵操作

將以下代碼添加到hichat.js的inti方法中，這樣在輸入昵稱后，按回車鍵就可以登陸，進(jìn)入聊天界面后，回車鍵可以發(fā)送消息。

document.getElementById('nicknameInput').addEventListener('keyup', function(e) {
   if (e.keyCode == 13) {
     var nickName = document.getElementById('nicknameInput').value;
     if (nickName.trim().length != 0) {
       that.socket.emit('login', nickName);
     };
   };
 }, false);
 document.getElementById('messageInput').addEventListener('keyup', function(e) {
   var messageInput = document.getElementById('messageInput'),
     msg = messageInput.value,
     color = document.getElementById('colorStyle').value;
   if (e.keyCode == 13 && msg.trim().length != 0) {
     messageInput.value = '';
     that.socket.emit('postMsg', msg, color);
     that._displayNewMsg('me', msg, color);
   };
 }, false);

部署上線

最后一步，當(dāng)然就是將我們的辛勤結(jié)晶部署到實(shí)際的站點(diǎn)。這應(yīng)該是最激動(dòng)人心也是如釋重負(fù)的一刻。但在這之前，讓我們先添加一個(gè)node.js程序通用的package.json文件，該文件里面可以指定我們的程序使用了哪些模塊，這樣別人在獲取到代碼后，只需通過npm install命令就可以自己下載安裝程序中需要的模塊了，而不用我們把模塊隨源碼一起發(fā)布。

添加package.json文件

將以下代碼保存為package.json保存到跟server.js相同的位置。

{
  "name": "hichat",
  "description": "a realtime chat web application",
  "version": "0.4.0",
  "main": "server.js",
  "dependencies": {
    "express": "3.4.x",
    "socket.io": "0.9.x"
  },
  "engines": {
    "node": "0.10.x",
    "npm": "1.2.x"
  }
}

云服務(wù)選擇與部署

首先我們得選擇一個(gè)支持Node.js同時(shí)又支持web socket協(xié)議的云服務(wù)器。因?yàn)橹皇怯糜跍y(cè)試，空間內(nèi)存限制什么的都無所謂，只要免費(fèi)就行。Node.js在GitHub的Wiki頁面上列出了眾多支持Node.js環(huán)境的云服務(wù)器，選來選去滿足條件的只有heroku。

如果你之前到heroku部署過相關(guān)Node程序的話，一定知道其麻煩之處，并且出錯(cuò)了非常不容易調(diào)試。不過當(dāng)我在寫這篇博客的時(shí)候，我發(fā)現(xiàn)了一個(gè)利器codeship，將它與你的github綁定之后，你每次提交了新的代碼它會(huì)自動(dòng)部署到heroku上面。什么都不用做！

代碼更新，環(huán)境設(shè)置，編譯部署，全部自動(dòng)搞定，并且提供了詳細(xì)的log信息及各步驟的狀態(tài)信息。使用方法也是很簡(jiǎn)單，注冊(cè)后按提示，兩三步搞定，鑒于本文已經(jīng)夠長(zhǎng)了，應(yīng)該創(chuàng)紀(jì)錄了，這里就不多說了。

已知問題

部署測(cè)試后，發(fā)現(xiàn)一些本地未出現(xiàn)的問題，主要有以下幾點(diǎn)：

首次連接過慢，有時(shí)會(huì)失敗出現(xiàn)503錯(cuò)誤，這個(gè)查了下heroku文檔，官方表示程序首次接入時(shí)受資源限制確實(shí)會(huì)很慢的，這就是用免費(fèi)套餐注定被鄙視的結(jié)果，不過用于線上測(cè)試這點(diǎn)還是能夠忍受的
發(fā)送表情時(shí)，Chrome會(huì)向服務(wù)器重新請(qǐng)求已經(jīng)下載到客戶端的gif圖片，而IE和FF都無此問題，導(dǎo)致在Chrome里表情會(huì)有延遲，進(jìn)而出現(xiàn)聊天主信息窗口滾動(dòng)也不及時(shí)的現(xiàn)象
用戶未活動(dòng)一定時(shí)間后會(huì)與服務(wù)器失連，socket自動(dòng)斷開，不知道是socket.io內(nèi)部機(jī)制還是又是heroku搗鬼

總結(jié)展望

經(jīng)過上面一番折騰，一個(gè)基本的聊天程序便打造完畢?？梢酝晟频牡胤竭€有許多，比如利用CSS3的動(dòng)畫，完全可以制作出窗口抖動(dòng)功能的。聽起來很不錯(cuò)是吧。同時(shí)利用HTML5的Audio API，要實(shí)現(xiàn)類似微信的語音消息也不是不可能的，夠震撼吧。甚至還有Geolocaiton API我們就可以聯(lián)想到實(shí)現(xiàn)同城功能，利用Webcam可以打造出視頻對(duì)聊，但這方面WebRTC已經(jīng)做得很出色了。

PS：做程序員之前有兩個(gè)想法，一是寫個(gè)播放器，一是寫個(gè)聊天程序，現(xiàn)在圓滿了。

源碼下載：demo

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: