玩轉Node.js（四）-搭建簡單的聊天室

時間 2019-12-08

原文原文鏈接

玩轉Node.js（四）-搭建簡單的聊天室html

　　Nodejs很久沒有跟進了，最近想用它搞一個聊天室，而後便偶遇了socket.io這個東東，說是能夠用它來簡單的實現實時雙向的基於事件的通信機制。我便看了一些個教程使用它來搭建一個超級簡單的聊天室。前端

初始化項目node

　　在電腦裏新建一個文件夾，叫作「chatroom」，而後使用npm進行初始化：jquery

$ npm init

　　而後根據提示以及相關信息一步一步輸入，固然也能夠一路回車下去，以後會在項目裏生成一個package.json文件，裏面的信息以下：git

 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  }

　　這個文件描述了項目的相關信息。github

安裝socket.ionpm

　　接下來，安裝socket.io：json

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>

View Code

　　而後須要在裏面加上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>