Node+expressはチャットルームを実装します-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

Node+expressはチャットルームを実装します

php中世界最好的语言

Mar 23, 2018 pm 03:00 PM

成し遂げるチャットルーム

今回は、node+expressを使用してチャットルームを実装するための注意事項を紹介します。以下は実際的なケースです。

この記事では、node+express+jquery を使用してパーソナライズされたチャットルームを作成します。一緒に作成しましょう~ (記事の最後にあるソースコードのアドレスを参照してください)

レンダリング

プロジェクト構造

実装機能

ログイン検出
システムは自動的にユーザーステータス(入力/退出)を要求します
オンラインユーザーを表示
メッセージの送受信をサポート
カスタムフォントカラー
絵文字の送信をサポート
写真の送信をサポート

以下では

事前準備

nodeとnpm環境、express、socket.io

の実装方法を一つずつ説明していきます特定の実装

1. チャットルームをサーバーにデプロイします

まず、ノードを含むサーバーを構築し、localhost:3000 ポートにデプロイして、最初にブラウザーに「hello world」を送信して新しいサーバーを作成してみます。 .js ファイル。

var app = require('express')(); // 引入express模块
var http = require('http').Server(app);
app.get('/', function(req, res){ // 路由为localhost:3000时向客户端响应“hello world”
 res.send('<h1>Hello world</h1>'); // 发送数据
});
http.listen(3000, function(){ // 监听3000端口
 console.log('listening on *:3000'); 
});

ログイン後にコピー

ブラウザを開いて URL: localhost:3000 を入力すると、次のようになります

ノードサーバーが正常に確立されました。

次に、express を使用して HTML ページをブラウザに返します

#安装express模块
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) が相互に相対パスを使用できることを意味します。以下に示すように、index.html ファイルと対応する CSS を www フォルダーに追加します (対応する CSS コードは投稿されません。詳細についてはソースコードを参照してください)。このページでは、素晴らしいフォントの小さなアイコンが使用されています

<!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" rel="external nofollow" >
 <link rel="stylesheet" href="style/font-awesome-4.7.0/css/font-awesome.min.css" rel="external nofollow" >
 </head>
 <body>
 <p class="all">
  <p class="name">
  <!-- <h2>请输入你的昵称</h2> -->
  <input type="text" id="name" placeholder="请输入昵称..." autocomplete="off"> 
  <button id="nameBtn">确 定</button>
  </p>
  <p class="main">
  <p class="header">
   <img src="image/logo.jpg">
   happy聊天室
  </p>
  <p id="container">
   <p class="conversation">
    <ul id="messages"></ul>
    <form action="">
     <p 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>
     <p class="selectBox"> 
      <p class="smile"> 
      </p>
      <p class="img"> 
      </p>
     </p>
     </p>
     <!-- autocomplete禁用自动完成功能 -->
     <textarea id="m"></textarea>
     <button class="btn rBtn" id="sub">发送</button>
     <button class="btn" id="clear">关闭</button>
    </form>
   </p>
   <p class="contacts">
   <h1>在线人员(<span id="num">0</span>)</h1>
   <ul id="users"></ul>
   <p>当前无人在线哟~</p>
   </p>
  </p>
  </p> 
 </p> 
 </body>
</html>

ログイン後にコピー

ローカルホストを開きます。 :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がトリガーされた接続イベントはサーバー上に「ユーザーが接続しました」と出力しますが、サーバーに接続しているユーザーの数をカウントしたい場合は、接続しているユーザーがいる場合は「n ユーザーが接続しています」と出力します。ここで、n は接続されたユーザーの数です。ユーザーは何をすべきでしょうか？

server.js でグローバル配列を user として設定します。ユーザーが接続に成功するたびに、接続イベントの user.length にユーザーのニックネームをプッシュして、接続に成功したユーザーの数を確認します。

ちょっと待ってください。

ユーザーが接続するときにログインするためのニックネームを入力します。同じニックネームが使用されることを避けるために、サーバーはログインイベントを監視するため、トリガーが発生します。イベントは接続イベントのコールバック関数に記述する必要があります。

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=&#39;system&#39;><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(&#39;receiveMsg&#39;, { // 向除了发送者之外的其他用户广播
      name: socket.nickname,
      img: img,
      msg: data.msg,
      color: data.color,
      side: &#39;left&#39;
    });
    socket.emit(&#39;receiveMsg&#39;, { // 向发送者发送消息，为什么分开发送？因为css样式不同
      name: socket.nickname,
      img: img,
      msg: data.msg,
      color: data.color,
      side: &#39;right&#39;
    });
  });

ログイン後にコピー

服务器端接受到来自用户的消息后会触发客户端的receiveMsg事件，并将用户发送的消息作为参数传递，该事件会向聊天面板添加聊天内容，以下为chat-client.js代码

// 点击按钮或回车键发送消息
  $(&#39;#sub&#39;).click(sendMsg);
  $(&#39;#m&#39;).keyup((ev)=> {
   if(ev.which == 13) {
    sendMsg();
   }
  });
  // 接收消息
  socket.on('receiveMsg', (obj)=> { // 将接收到的消息渲染到面板上
   $('#messages').append(` 
     <li class=&#39;${obj.side}&#39;>
     <img src="${obj.img}">
     <p>
      <span>${obj.name}</span>
      <p>${obj.msg}</p>
     </p>
    </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调用系统调色板

<!-- $(&#39;#color&#39;).val();为选中颜色，格式为#FFCCBB -->
<input type=&#39;color&#39; id=&#39;color&#39;>

ログイン後にコピー

客户端根据用户选择的颜色渲染内容样式，代码很容易看懂，这里就不赘述了。

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(&#39;+msg.substr(start+6, end-start-6)+&#39;).png">';
    msg = msg.substr(end+1, msg.length);
   }
   content += '<span>'+msg+'</span>';
   
   $('#messages').append(`
    <li class=&#39;${obj.side}&#39;>
     <img src="${obj.img}">
     <p>
      <span>${obj.name}</span>
      <p style="color: ${obj.color};">${content}</p>
     </p>
    </li>
   `);
   // 滚动条总是在最底部
   $('#messages').scrollTop($('#messages')[0].scrollHeight);
  });

ログイン後にコピー

可以成功发送表情了。

8、支持发送图片

首先是图片按钮样式，发送图片的按钮是type为file的input。这里有一个改变样式的小技巧，那就是将input的透明度设为0，z-index为5，将你想要得样式放在p中，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="&#39;+src+&#39;">';
    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=&#39;${obj.side}&#39;>
      <img src="${obj.img}">
      <p>
       <span>${obj.name}</span>
       <p style="padding: 0;">${obj.msg}</p>
      </p>
     </li>
    `); 
    $('#messages').scrollTop($('#messages')[0].scrollHeight);
    return;
   }
   // 提取文字中的表情加以渲染
   // 下面不变
  });

ログイン後にコピー

现在我们可以发送图片了

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

ホットトピック

Java チュートリアル

1655

CakePHP チュートリアル

1414

Laravel チュートリアル

1307

PHP チュートリアル

1254

C# チュートリアル

1228

Related knowledge

Huawei 携帯電話にデュアル WeChat ログインを実装するにはどうすればよいですか? Mar 24, 2024 am 11:27 AM

Huawei 携帯電話にデュアル WeChat ログインを実装するにはどうすればよいですか?ソーシャルメディアの台頭により、WeChatは人々の日常生活に欠かせないコミュニケーションツールの1つになりました。ただし、多くの人は、同じ携帯電話で同時に複数の WeChat アカウントにログインするという問題に遭遇する可能性があります。 Huawei 社の携帯電話ユーザーにとって、WeChat の二重ログインを実現することは難しくありませんが、この記事では Huawei 社の携帯電話で WeChat の二重ログインを実現する方法を紹介します。まず第一に、ファーウェイの携帯電話に付属するEMUIシステムは、デュアルアプリケーションを開くという非常に便利な機能を提供します。アプリケーションのデュアルオープン機能により、ユーザーは同時に

Java を使用して愛のアニメーションを実装するコードを作成する Dec 23, 2023 pm 12:09 PM

Java コードによる愛のアニメーション効果の実現プログラミングの分野では、アニメーション効果は非常に一般的で人気があります。 Java コードを使用してさまざまなアニメーション効果を実現できますが、その 1 つがハートのアニメーション効果です。この記事では、Java コードを使用してこの効果を実現する方法と、具体的なコード例を紹介します。ハートのアニメーション効果を実現する鍵は、ハートの形を描き、ハートの位置や色を変えることでアニメーション効果を実現することです。簡単な例のコードは次のとおりです: importjavax.swing。

PHP プログラミングガイド: フィボナッチ数列を実装する方法 Mar 20, 2024 pm 04:54 PM

プログラミング言語 PHP は、さまざまなプログラミングロジックやアルゴリズムをサポートできる、Web 開発用の強力なツールです。その中でも、フィボナッチ数列の実装は、一般的で古典的なプログラミングの問題です。この記事では、PHP プログラミング言語を使用してフィボナッチ数列を実装する方法を、具体的なコード例を添付して紹介します。フィボナッチ数列は、次のように定義される数学的数列です。数列の最初と 2 番目の要素は 1 で、3 番目の要素以降、各要素の値は前の 2 つの要素の合計に等しくなります。シーケンスの最初のいくつかの要素

Go言語を使用してWebSocketチャットルームを開発する方法 Dec 14, 2023 pm 01:46 PM

Go 言語を使用して Websocket チャットルームを開発する方法. Websocket は、接続を確立することでサーバーとクライアント間の双方向通信を可能にするリアルタイム通信プロトコルです。 Websocket は、リアルタイムのメッセージ交換を可能にし、効率的なパフォーマンスを提供するため、チャットルームを開発する場合に非常に良い選択肢です。この記事では、Go 言語を使用して簡単な Websocket チャットルームを開発する方法と、いくつかの具体的なコード例を紹介します。 1. 準備 1. Goをインストールする

Huawei携帯電話にWeChatクローン機能を実装する方法 Mar 24, 2024 pm 06:03 PM

Huawei 携帯電話に WeChat クローン機能を実装する方法ソーシャルソフトウェアの人気と人々のプライバシーとセキュリティの重視に伴い、WeChat クローン機能は徐々に人々の注目を集めるようになりました。 WeChat クローン機能を使用すると、ユーザーは同じ携帯電話で複数の WeChat アカウントに同時にログインできるため、管理と使用が容易になります。 Huawei携帯電話にWeChatクローン機能を実装するのは難しくなく、次の手順に従うだけです。ステップ 1: 携帯電話システムのバージョンと WeChat のバージョンが要件を満たしていることを確認するまず、Huawei 携帯電話システムのバージョンと WeChat アプリが最新バージョンに更新されていることを確認します。

開発に関する提案: ThinkPHP フレームワークを使用して非同期タスクを実装する方法 Nov 22, 2023 pm 12:01 PM

「開発に関する提案: ThinkPHP フレームワークを使用して非同期タスクを実装する方法」インターネット技術の急速な発展に伴い、Web アプリケーションには、多数の同時リクエストと複雑なビジネスロジックを処理するための要件がますます高まっています。システムのパフォーマンスとユーザーエクスペリエンスを向上させるために、開発者は多くの場合、電子メールの送信、ファイルのアップロードの処理、レポートの生成など、時間のかかる操作を実行するために非同期タスクの使用を検討します。 PHP の分野では、人気のある開発フレームワークとして ThinkPHP フレームワークが、非同期タスクを実装するための便利な方法をいくつか提供しています。

Golang がゲーム開発の可能性を可能にする方法をマスターする Mar 16, 2024 pm 12:57 PM

今日のソフトウェア開発分野では、効率的で簡潔かつ同時実行性の高いプログラミング言語として、Golang (Go 言語) が開発者にますます好まれています。豊富な標準ライブラリと効率的な同時実行機能により、ゲーム開発の分野で注目を集めています。この記事では、ゲーム開発に Golang を使用する方法を検討し、具体的なコード例を通じてその強力な可能性を示します。 1. ゲーム開発における Golang の利点 Golang は静的型付け言語として、大規模なゲームシステムの構築に使用されます。

PHP ゲーム要件実装ガイド Mar 11, 2024 am 08:45 AM

PHP ゲーム要件実装ガイドインターネットの普及と発展に伴い、Web ゲーム市場の人気はますます高まっています。多くの開発者は、PHP 言語を使用して独自の Web ゲームを開発することを望んでおり、ゲーム要件の実装は重要なステップです。この記事では、PHP 言語を使用して一般的なゲーム要件を実装する方法を紹介し、具体的なコード例を示します。 1. ゲームキャラクターの作成 Web ゲームにおいて、ゲームキャラクターは非常に重要な要素です。ゲームキャラクターの名前、レベル、経験値などの属性を定義し、これらを操作するメソッドを提供する必要があります。

See all articles

Node+expressはチャットルームを実装します

ホットAIツール

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

人気の記事

ホットツール

メモ帳++7.3.1

SublimeText3 中国語版

ゼンドスタジオ 13.0.1

ドリームウィーバー CS6

SublimeText3 Mac版

ホットトピック