零基礎實現node+express個性化聊天室

来源:https://www.cnblogs.com/wind-lanyan/archive/2018/02/04/8412657.html
-Advertisement-
Play Games

本篇文章使用node+express+jquery寫一個個性化聊天室，一起來get一下~（源碼地址見文章末尾） 效果圖 項目結構 實現功能 下麵將一一講解如何實現 前期準備 具體實現 1、將聊天室部署到伺服器 先用node搭建一個伺服器，部署在localhost:3000埠，先嘗試向瀏覽器發送一個 ...


本篇文章使用node+express+jquery寫一個個性化聊天室，一起來get一下~（源碼地址見文章末尾）

效果圖

項目結構

實現功能

  1. 登錄檢測
  2. 系統自動提示用戶狀態（進入/離開）
  3. 顯示線上用戶
  4. 支持發送和接收消息
  5. 自定義字體顏色
  6. 支持發送表情
  7. 支持發送圖片

下麵將一一講解如何實現

前期準備

node及npm環境、express、socket.io

具體實現

1、將聊天室部署到伺服器

先用node搭建一個伺服器，部署在localhost:3000埠，先嘗試向瀏覽器發送一個“hello world”，新建server.js文件。

 1 var app = require('express')();  // 引入express模塊
 2 var http = require('http').Server(app);
 3 
 4 app.get('/', function(req, res){  // 路由為localhost:3000時向客戶端響應“hello world”
 5   res.send('<h1>Hello world</h1>');  // 發送數據
 6 });
 7 
 8 http.listen(3000, function(){  // 監聽3000埠
 9   console.log('listening on *:3000'); 
10 });

打開瀏覽器輸入網址：localhost:3000是這樣的

一個node伺服器搭建成功。

接下來用express向瀏覽器返回一個html頁面

1 #安裝express模塊
2 npm install --save express

將server.js的代碼改一下：

var express = require('express');
var app = express();
var http = require('http').Server(app); 

// 路由為/預設www靜態文件夾
app.use('/', express.static(__dirname + '/www'));
  • express.static(__dirname + '/www');是將www文件夾托管為靜態資源，意味著這個文件夾里的文件（html、css、js）彼此可以用相對路徑。

在www文件夾中添加index.html文件以及相應的css（相應css代碼就不貼了，詳情見源碼），如下，該頁面用了font-awesome小圖標

<!doctype html>
<html>
  <head>        
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>chat</title>
    <link rel="stylesheet" href="style/index.css">
    <link rel="stylesheet" href="style/font-awesome-4.7.0/css/font-awesome.min.css">
  </head>
  <body>
    <div class="all">
      <div class="name">
        <!-- <h2>請輸入你的昵稱</h2> -->
        <input type="text" id="name" placeholder="請輸入昵稱..." autocomplete="off"> 
        <button id="nameBtn">確  定</button>
      </div>
      <div class="main">
        <div class="header">
          <img src="image/logo.jpg">
          happy聊天室
        </div>
        <div id="container">
          <div class="conversation">
              <ul id="messages"></ul>
              <form action="">
                  <div class="edit"> 
                    <input type="color" id="color" value="#000000">
                    <i title="雙擊取消選擇" class="fa fa-smile-o" id="smile">
                    </i><i title="雙擊取消選擇" class="fa fa-picture-o" id="img"></i>
                    <div class="selectBox"> 
                      <div class="smile"> 
                      </div>
                      <div class="img"> 
                      </div>
                    </div>
                  </div>
                  <!-- autocomplete禁用自動完成功能 -->
                  <textarea id="m"></textarea>
                  <button class="btn rBtn" id="sub">發送</button>
                  <button class="btn" id="clear">關閉</button>
              </form>
          </div>
          <div class="contacts">
            <h1>線上人員(<span id="num">0</span>)</h1>
            <ul id="users"></ul>
            <p>當前無人線上喲~</p>
          </div>
        </div>
      </div> 
    </div> 
  </body>
</html>

打開localhost:3000，會看到如下：

聊天室成功部署到伺服器。

2、檢測登錄

在客戶端和伺服器之間傳送消息需要用到socket.io

#安裝socket.io模塊
npm install --save socket.io

將server.js改動如下：

var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);

app.use('/', express.static(__dirname + '/www'));

io.on('connection', function(socket){ // 用戶連接時觸發
  console.log('a user connected');
});

http.listen(3000, function(){
  console.log('listening on *:3000');
});

當打開localhost:3000的時候會觸發伺服器端io的connection事件，會在伺服器列印“a user connected”，但是我們想統計一下連接該伺服器的用戶人數，如果有用戶連接就列印“n users connected”，n為用戶人數，怎麼辦呢？

在server.js設置一個全局數組為user，每當一個用戶連接成功就在連接事件中將用戶的昵稱push進user，列印user.length即可知道已成功連接用戶的人數。

等一等。

在用戶連接的時輸入昵稱登錄，我們應該檢測一下用戶的昵稱是否已存在，避免昵稱相同的情況發生，在伺服器監聽一個登錄事件來判斷該情況，由於一切都發生在用戶連接之後，所以觸發事件應該寫在connection事件的回調函數中。

io.on('connection', (socket)=> {
    // 渲染線上人員
    io.emit('disUser', usersInfo);

    // 登錄，檢測用戶名
    socket.on('login', (user)=> {
        if(users.indexOf(user.name) > -1) { // 昵稱是否存在
            socket.emit('loginError'); // 觸發客戶端的登錄失敗事件
        } else {
            users.push(user.name); //儲存用戶的昵稱
            usersInfo.push(user); // 儲存用戶的昵稱和頭像
            socket.emit('loginSuc'); // 觸發客戶端的登錄成功事件
            socket.nickname = user.name;
            io.emit('system', {  // 向所有用戶廣播該用戶進入房間
                name: user.name,
                status: '進入'
            });
            io.emit('disUser', usersInfo);  // 渲染右側線上人員信息
            console.log(users.length + ' user connect.'); // 列印連接人數
        }
    });
  • system和disUser事件先不管，之後再說
  • 區分io.emit(foo)、socket.emit(foo)、socket.broadcast.emit(foo)
/* 
   io.emit(foo); //會觸發所有客戶端用戶的foo事件
   socket.emit(foo); //只觸發當前客戶端用戶的foo事件
   socket.broadcast.emit(foo); //觸發除了當前客戶端用戶的其他用戶的foo事件
*/

接下來是客戶端代碼chat-client.js

$(function() {
    // io-client
    // 連接成功會觸發伺服器端的connection事件
    var socket = io(); 

    // 點擊輸入昵稱
    $('#nameBtn').click(()=> {  
      var imgN = Math.floor(Math.random()*4)+1; // 隨機分配頭像
      if($('#name').val().trim()!=='')
          socket.emit('login', {  // 觸發伺服器端登錄事件
            name: $('#name').val(),
            img: 'image/user' + imgN + '.jpg'
          }); 
      return false;  
    });
    // 登錄成功，隱藏登錄層
    socket.on('loginSuc', ()=> { 
      $('.name').hide(); 
    })
    socket.on('loginError', ()=> {
      alert('用戶名已存在，請重新輸入！');
      $('#name').val('');
    }); 
});

倘若登錄成功，會看到如下頁面：

登錄檢測完成。

3、系統自動提示用戶狀態（進入/離開）

該功能是為了實現上圖所示的系統提示“XXX進入聊天室”，在登錄成功時觸發system事件，向所有用戶廣播信息，註意此時用的是io.emit而不是socket.emit，客戶端代碼如下

// 系統提示消息
socket.on('system', (user)=> { 
  var data = new Date().toTimeString().substr(0, 8);
  $('#messages').append(`<p class='system'><span>${data}</span><br /><span>${user.name}  ${user.status}了聊天室<span></p>`);
  // 滾動條總是在最底部
  $('#messages').scrollTop($('#messages')[0].scrollHeight);
});

4、顯示線上用戶

客戶端監聽一個顯示線上用戶的事件disUser，在以下三個時間段伺服器端就觸發一次該事件重新渲染一次

  • 程式開始啟動時
  • 每當用戶進入房間
  • 每當用戶離開房間
// chat-client.js
// 顯示線上人員
socket.on('disUser', (usersInfo)=> {
  displayUser(usersInfo);
});
// 顯示線上人員
function displayUser(users) {
  $('#users').text(''); // 每次都要重新渲染
  if(!users.length) {
    $('.contacts p').show();
  } else {
    $('.contacts p').hide();
  }
  $('#num').text(users.length);
  for(var i = 0; i < users.length; i++) {
    var $html = `<li>
      <img src="${users[i].img}">
      <span>${users[i].name}</span>
    </li>`;
    $('#users').append($html);
  }
}

5、支持發送和接收消息

用戶發送消息時觸發伺服器端的sendMsg事件，並將消息內容作為參數，伺服器端監聽到sendMsg事件之後向其他所有用戶廣播該消息，用的socket.broadcast.emit(foo)

// server.js
    // 發送消息事件
    socket.on('sendMsg', (data)=> {
        var img = '';
        for(var i = 0; i < usersInfo.length; i++) {
            if(usersInfo[i].name == socket.nickname) {
                img = usersInfo[i].img;
            }
        }
        socket.broadcast.emit('receiveMsg', {  // 向除了發送者之外的其他用戶廣播
            name: socket.nickname,
            img: img,
            msg: data.msg,
            color: data.color,
            side: 'left'
        });
        socket.emit('receiveMsg', {  // 向發送者發送消息，為什麼分開發送？因為css樣式不同
            name: socket.nickname,
            img: img,
            msg: data.msg,
            color: data.color,
            side: 'right'
        });
    });

伺服器端接受到來自用戶的消息後會觸發客戶端的receiveMsg事件，並將用戶發送的消息作為參數傳遞，該事件會向聊天面板添加聊天內容，以下為chat-client.js代碼

// 點擊按鈕或回車鍵發送消息
    $('#sub').click(sendMsg);
    $('#m').keyup((ev)=> {
      if(ev.which == 13) {
        sendMsg();
      }
    });

    // 接收消息
    socket.on('receiveMsg', (obj)=> { // 將接收到的消息渲染到面板上
      $('#messages').append(` 
         <li class='${obj.side}'>
          <img src="${obj.img}">
          <div>
            <span>${obj.name}</span>
            <p>${obj.msg}</p>
          </div>
        </li>
      `);
      // 滾動條總是在最底部
      $('#messages').scrollTop($('#messages')[0].scrollHeight);
    }); 


    // 發送消息
    function sendMsg() { 
      if($('#m').val() == '') {  // 輸入消息為空
        alert('請輸入內容！');
        return false;
      }
      socket.emit('sendMsg', {
        msg: $('#m').val()
      });
      $('#m').val(''); 
      return false; 
    }

6、自定義字體顏色

得益於html5的input新特性，可以通過type為color的input調用系統調色板

<!-- $('#color').val();為選中顏色，格式為#FFCCBB -->
<input type='color' id='color'>

客戶端根據用戶選擇的顏色渲染內容樣式，代碼很容易看懂，這裡就不贅述了。

7、支持發送表情

發送表情其實很簡單，將表情圖片放在li中，當用戶點擊li時就將表情的src中的序號解析出來，用[emoji+表情序號]的格式存放在聊天框里，點擊發送後再解析為src。就是一個解析加還原的過程，這一過程中我們的伺服器代碼不變，需要改變的是客戶端監聽的receiveMsg事件。

// chat-client.js

    // 顯示表情選擇面板
    $('#smile').click(()=> {
      $('.selectBox').css('display', "block");
    });
    $('#smile').dblclick((ev)=> { 
      $('.selectBox').css('display', "none");
    });  
    $('#m').click(()=> {
      $('.selectBox').css('display', "none");
    }); 

    // 用戶點擊發送表情
    $('.emoji li img').click((ev)=> {
        ev = ev || window.event;
        var src = ev.target.src;
        var emoji = src.replace(/\D*/g, '').substr(6, 8); // 提取序號
        var old = $('#m').val(); // 用戶輸入的其他內容
        $('#m').val(old+'[emoji'+emoji+']');
        $('.selectBox').css('display', "none");
    });

客戶端收到之後將表情序號還原為src，更改如下

// chat-client.js

    // 接收消息
    socket.on('receiveMsg', (obj)=> {  
      // 提取文字中的表情加以渲染
      var msg = obj.msg;
      var content = '';
      while(msg.indexOf('[') > -1) {  // 其實更建議用正則將[]中的內容提取出來
        var start = msg.indexOf('[');
        var end = msg.indexOf(']');

        content += '<span>'+msg.substr(0, start)+'</span>';
        content += '<img src="image/emoji/emoji%20('+msg.substr(start+6, end-start-6)+').png">';
        msg = msg.substr(end+1, msg.length);
      }
      content += '<span>'+msg+'</span>';
      
      $('#messages').append(`
        <li class='${obj.side}'>
          <img src="${obj.img}">
          <div>
            <span>${obj.name}</span>
            <p style="color: ${obj.color};">${content}</p>
          </div>
        </li>
      `);
      // 滾動條總是在最底部
      $('#messages').scrollTop($('#messages')[0].scrollHeight);
    });

可以成功發送表情了。

8、支持發送圖片

首先是圖片按鈕樣式，發送圖片的按鈕是type為file的input。這裡有一個改變樣式的小技巧，那就是將input的透明度設為0，z-index為5，將你想要得樣式放在div中，z-index設為1覆蓋在input上。

<input type="file" id="file">
<i class="fa fa-picture-o" id="img"></i>

css：

.edit #file {
    width: 32.36px;
    height: 29px;
    opacity: 0;
    z-index: 5;
}
.edit #img {
    z-index: 0;
    margin-left: -43px;
}

完美

接下來是點擊按鈕發送圖片，我們用了fileReader對象，這裡有一篇不錯的文章講解了fileReader，fileReader是一個對象，可以將我們選中的文件已64位輸出然後將結果存放在reader.result中，我們選中圖片之後，reader.result就存放的是圖片的src

// chat-client.js

    // 用戶發送圖片
    $('#file').change(function() {
      var file = this.files[0];  // 上傳單張圖片
      var reader = new FileReader();

      //文件讀取出錯的時候觸發
      reader.onerror = function(){
          console.log('讀取文件失敗，請重試！'); 
      };
      // 讀取成功後
      reader.onload = function() {
        var src = reader.result;  // 讀取結果
        var img = '<img class="sendImg" src="'+src+'">';
        socket.emit('sendMsg', {  // 發送
          msg: img,
          color: color,
          type: 'img'  // 發送類型為img
        }); 
      };
      reader.readAsDataURL(file); // 讀取為64位
    });

由於發送的是圖片，所以對頁面佈局難免有影響，為了頁面美觀客戶端在接收其他用戶發送的消息的時候會先判斷發送的是文本還是圖片，根據不同的結果展示不同佈局。判斷的方法是在客戶發送消息的時候傳入一個type，根據type的值來確實發送內容的類型。所以上面發送圖片代碼中觸發了sendMsg事件，傳入參數多了一個type屬性。

相應的，我們應該在chat-client.js中修改receiveMsg事件監聽函數，改為根據傳入type做不同操作

chat-client.js
    // 接收消息
    socket.on('receiveMsg', (obj)=> { 
      // 發送為圖片
      if(obj.type == 'img') {
        $('#messages').append(`
          <li class='${obj.side}'>
            <img src="${obj.img}">
            <div>
              <span>${obj.name}</span>
              <p style="padding: 0;">${obj.msg}</p>
            </div>
          </li>
        `); 
        $('#messages').scrollTop($('#messages')[0].scrollHeight);
        return;
      }

      // 提取文字中的表情加以渲染
      // 下麵不變
    });

現在我們可以發送圖片了

圓滿完成一個功能齊全的聊天室！

 

源碼地址：windlany/happy-chat，本文斷斷續續寫了兩天，真是寫文章比敲代碼還累...其實寫一個聊天室並不難，這算是node起步作品吧。有興趣的可以fork下來根據自己需求改改，覺得不錯請給我一個star。

 

參考鏈接

您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • jQuery的介紹和選擇器詳解
    本文最初發表於 "博客園" ，併在 "GitHub" 上持續更新 前端的系列文章 。歡迎在GitHub上關註我，一起入門和進階前端。 以下是正文。 jQuery 的介紹 引入 jQuery 的原因 在用 js 寫代碼時，會遇到一些問題： window.onload 事件有事件覆蓋的問題，因此只能寫一 ...
  • 瀏覽器內核趣對話
    Chrome:老哥我當初開始搞的時候實力不夠，只能偷蘋果的WebKit過來用著先,但現在翅膀硬了，想自己開發一款blink內核，儘早擺脫蘋果的影子； Safari:獨一無二的高貴，WebKit，我的原創發明！ FireFox:原創Gecko,獨一無二，爵士人生！ Opera:我唯谷歌爹馬首是瞻，現在 ...
  • “茴”字有四種寫法，this也是一樣
    說到這個地方又想起以前高中還是初中學的《孔乙己》這個梗，但是這裡的this顯然實用性比那個要大很多，哈哈。 簡單來說，this有四種應用場景，分別是在構造函數上、對象屬性中、普通函數中、call和apply方法中。 先來看第一種，構造函數： 在這裡，this指向的是新對象f。而在對象屬性中，這又有了 ...
  • react創建組件的三種方式
    react創建組件的三種方式： 1、函數式無狀態組件 2、es5方式React.createClass組件 3、es6方式extends React.Component 三種創建方式的異同 1、函數式無狀態組件 （1）語法 （2）特點 ● 它是為了創建純展示組件，這種組件只負責根據傳入的props來 ...
  • 數組去重古與今
    關於數組去重這個問題，我曾經在牛客網上就遇到過一次，後來在做一些網上的筆試的時候又碰到了這個問題，其實數組去重的方法有非常多種，五花八門的。但其實我覺得這隻是一件很小的事，何必弄得好像實現的方法越複雜就越厲害一樣。廢話不多說，這裡我只介紹我所認可的兩種方法。 第一種，就是很普通的思維，比如，對於[1 ...
  • JavaScript數組操作
    1.生成數組： 1.1 通過Set中轉，生成新的數組 ...
  • JavaScript：事件對象Event和冒泡
    本文最初發表於 "博客園" ，併在 "GitHub" 上持續更新 前端的系列文章 。歡迎在GitHub上關註我，一起入門和進階前端。 以下是正文。 綁定事件的兩種方式 我們在上一篇文章 "DOM操作詳解" 中已經講過事件的概念。這裡講一下註冊事件的兩種方式，我們以onclick事件為例。 方式一：o ...
  • HTML簡介
    HTML（HyperText Markup Language超文本標記語言）是網路上的通用語言，也是Web語言的基礎。它是一種標記語言，通過嵌入代碼或標記來表明文本格式。 HTML的基本元素 主窗體元素 <html></html>：定義HTML文檔 <head></head>：頭部信息 <title ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類