検索

ホームページ >ウェブフロントエンド >jsチュートリアル >node.js駆動のチャットルームWebアプリ：ノード、mongodb、ソケットを作成する

node.js駆動のチャットルームWebアプリ：ノード、mongodb、ソケットを作成する

William Shakespeare
William Shakespeareオリジナル
2025-02-20 09:30:13457ブラウズ

node.js駆動のチャットルームWebアプリ：ノード、mongodb、ソケットを作成する

キーテイクアウト

  • このチュートリアルでは、node.js、mongodb、およびsocket.ioを使用してリアルタイムチャットルームWebアプリを構築するための段階的なガイドを提供します。チャットルームはクラウドに完全に展開されます
    • チュートリアルでは、socket.ioを使用してリアルタイムの双方向イベントベースの通信アプリを作成する方法について説明します。 WebSocketsを大幅に使用するプロセスを簡素化します
  • チュートリアルでは、チャットルームに参加して離れるユーザーをログインする方法と、チャットチャネルで受信したメッセージをソケットの他のすべての接続にブロードキャストする方法を示しています。
    • チュートリアルでは、チャットメッセージをMongoDBデータベースに保存する方法と、チャットルームに参加するすべての新しいユーザーにコンテキストを提供するために受信した最後の10のメッセージを放出する方法を示しています。
  • チュートリアルは、WebSocketを介して他のすべての接続されたクライアントに受信したメッセージをブロードキャストできるチャットシステムで終了します。システムはメッセージをデータベースに保存し、新しいユーザーごとに最後の10のメッセージを取得します。
  • この記事は、MicrosoftのWeb Dev Techシリーズの一部です。 SitePointを可能にしてくれたパートナーをサポートしてくれてありがとう。
  • このnode.jsチュートリアルシリーズは、クラウドに完全に展開されているnode.js駆動のリアルタイムチャットルームWebアプリを構築するのに役立ちます。 このシリーズでは、Windowsマシンでnode.jsをセットアップする方法（またはMacにいる場合は概念を学習する）、Expressを使用したWebフロントエンドの開発方法、node.js expressアプリを展開する方法を学びます。 azure、socket.ioを使用してリアルタイムレイヤーを追加する方法、およびそれをすべて一緒に展開する方法。
    • チュートリアルでは、オプションのVisual Studioとnode.jsツールを開発環境としてVisual Studioプラグインに使用します。両方のツールの無料ダウンロードへのリンクを提供しました。これは中級レベルの初心者の記事です。HTML5とJavaScriptを知ることが期待されています。

パート1 - node.jsの紹介 パート2 - node.jsとazure

を使用してExpressを歓迎します

パート3 - node.js、mongo、socket.ioでバックエンドを構築する

パート4 - ブートストラップを使用してチャットルームUIを構築します

パート5 - チャットルームをWebSockets

に接続します
パート6 - フィナーレとデバッグリモートノード.jsアプリ

パート3 - node.js、socket.io、およびmongoでチャットルームバックエンドを構築する

ハンズオンnode.jsチュートリアルシリーズのパート3へようこそ：node.js-PoweredチャットルームWebアプリを作成します。 この記事では、既存のExpressベースのnode.jsアプリを使用して、WebSocketサポートを備えたチャットルームバックエンドを作成する方法を紹介します。

WebSocketsとは何ですか？ socket.io？

とは何ですか

WebSocketは、WebブラウザーとWebサーバーの間にTCP（つまり、双方向通信）を介したフルダップレックスチャネルを作成できるように設計されたプロトコルです。 HTTPと完全に互換性があり、TCPポート番号80を使用しています。WebSocketにより、Webアプリケーションがリアルタイムになり、クライアントとサーバー間の高度なインタラクションをサポートすることができました。 Internet Explorer、Google Chrome、Firefox、Safari、Operaなど、いくつかのブラウザによってサポートされています。

socket.ioは、JavaScriptライブラリとnode.jsモジュールであり、リアルタイムの双方向イベントベースの通信アプリを簡単かつ迅速に作成できます。 WebSocketsを大幅に使用するプロセスを簡素化します。 socket.io v1.0を使用してチャットルームアプリを作成します。

socket.ioをpackage.jsonに追加します

package.jsonは、その依存関係を含むプロジェクトに関連するさまざまなメタデータを保持するファイルです。 NPMはこのファイルを使用して、プロジェクトで必要なモジュールをダウンロードできます。 Package.jsonのこのインタラクティブな説明とそれに含まれるものを見てください。

依存関係としてSocket.ioをプロジェクトに追加しましょう。それを行うには2つの方法があります。

チュートリアルシリーズをフォローしており、Visual Studioセットアップでプロジェクトを持っている場合は、プロジェクトのNPM部分を右クリックして、「新しいNPMパッケージをインストールしてください…」

を選択します。
    2. ウィンドウが開いたら、「socket.io」を検索し、上位の結果を選択し、「package.jsonに追加」チェックボックスをチェックします。 [パッケージをインストール]ボタンをクリックします。これにより、socket.ioをプロジェクトにインストールし、package.jsonファイルに追加します。
node.js駆動のチャットルームWebアプリ：ノード、mongodb、ソケットを作成する package.json

node.js駆動のチャットルームWebアプリ：ノード、mongodb、ソケットを作成する

OS XまたはLinuxを使用している場合、プロジェクトフォルダーのルートで次のコマンドを実行することで、上記と同じアクションを実現できます。 

<span>{
</span>  <span>"name": "NodeChatroom",
</span>  <span>"version": "0.0.0",
</span>  <span>"description": "NodeChatroom",
</span>  <span>"main": "app.js",
</span>  <span>"author": {
</span>    <span>"name": "Rami Sayar",
</span>    <span>"email": ""
</span>  <span>},
</span>  <span>"dependencies": {
</span>    <span>"express": "3.4.4",
</span>    <span>"jade": "*",
</span>    <span>"socket.io": "^1.0.6",
</span>    <span>"stylus": "*"
</span>  <span>}
</span><span>}</span>
に追加します
  • 次のステップは、socket.ioをapp.jsに追加することです。これを達成することができます。次のコードを置き換えて…
    • <span>npm install --save socket.io</span>
    …with：

    これにより、socket.ioモジュールがそれに接続できるように、httpサーバーをserve and passと呼ばれる変数でHTTPサーバーをキャプチャします。最後のコードブロックはサーブ変数を取得し、HTTPサーバーを起動するリッスン関数を実行します。

    ユーザーが参加して

    をログに記録します 
    http<span>.createServer(app).listen(app.get('port'), function(){
</span>  <span>console.log('Express server listening on port ' + app.get('port'));
</span><span>});</span>
    理想的には、チャットルームに参加するユーザーをログに記録したいと考えています。次のコードは、WebSocketを介してHTTPサーバーに介してすべての接続イベントで実行されるコールバック関数をフックすることにより、それを達成します。コールバック関数では、Console.logを呼び出して、ユーザーが接続したことを記録します。 serve.listen。

    を呼び出すと、このコードを追加できます

    <span>{
</span>  <span>"name": "NodeChatroom",
</span>  <span>"version": "0.0.0",
</span>  <span>"description": "NodeChatroom",
</span>  <span>"main": "app.js",
</span>  <span>"author": {
</span>    <span>"name": "Rami Sayar",
</span>    <span>"email": ""
</span>  <span>},
</span>  <span>"dependencies": {
</span>    <span>"express": "3.4.4",
</span>    <span>"jade": "*",
</span>    <span>"socket.io": "^1.0.6",
</span>    <span>"stylus": "*"
</span>  <span>}
</span><span>}</span>

    ユーザーが切断されたときに同じことをするには、各ソケットの切断イベントを接続する必要があります。前のコードブロックのコンソールログの後、次のコードを内部に追加します。 

    <span>npm install --save socket.io</span>
    最後に、コードは次のようになります：

    チャットチャンネルで受信したメッセージをブロードキャスト
    http<span>.createServer(app).listen(app.get('port'), function(){
</span>  <span>console.log('Express server listening on port ' + app.get('port'));
</span><span>});</span>

    socket.ioは、イベントを送信するためにEmitと呼ばれる関数を提供します。 チャットチャネルで受信したメッセージは、コールバックのブロードキャストフラグを使用してEmitを呼び出すことにより、このソケットの他のすべての接続にブロードキャストされます。

    最後に、コードは次のようになります：

    NOSQLデータベースにメッセージを保存する

    <span>var serve = http.createServer(app);
</span><span>var io = require('socket.io')(serve);
</span>
serve<span>.listen(app.get('port'), function() {
</span>    <span>console.log('Express server listening on port ' + app.get('port'));
</span><span>});</span>

    チャットルームは、チャットメッセージを単純なデータストアに保存する必要があります。通常、ノードのデータベースに保存する2つの方法があります。データベース固有のドライバーを使用するか、ORMを使用できます。このチュートリアルでは、メッセージをMongodbに保存する方法を紹介します。もちろん、PostgreSQLやMySQLなどのSQLデータベースなど、好きな他のデータベースを使用できます。

    接続するmongodbがあることを確認する必要があります。サードパーティサービスを使用して、MongoHQやMongolabなどのMongoDBをホストできます。このチュートリアルを見て、AzureのMongolabアドオンを使用してMongoDBを作成する方法を確認してください。 「アプリの作成」セクションにアクセスしたら、読み物を止めることができます。後で簡単にアクセスできるMongolab_uriをどこかに保存してください。 
    io<span>.on('connection', function (socket) {
</span>    <span>console.log('a user connected');
</span><span>});</span>
    MongoDBを作成し、クリップボードにコピーした接続情報の下にデータベース用のMongolab_uriを作成したら、URIがアプリケーションで利用可能であることを確認する必要があります。このURIなどの機密情報をコードまたはソースコード管理ツールの構成ファイルに追加することは、ベストプラクティスではありません。 Azure Webアプリケーションの構成メニュー（使用したチュートリアルなど）の接続文字列リストに値を追加するか、アプリ設定リスト（名前CustomConnStr_Mongolab_uri）に追加できます。ローカルマシンでは、customconnstr_mongolab_uriという名前とuriの値を使用して環境変数に追加できます。

    次のステップは、Mongodbのサポートをプロジェクトに追加することです。 Package.jsonの依存関係オブジェクトに次の行を追加することで、それを行うことができます。必ず変更をファイルに保存してください。

    ソリューションエクスプローラーのプロジェクトのNPM部分を右クリックして、右クリックのコンテキストメニューを表示します。 [コンテンツ]メニューから[不足しているパッケージをインストール]をクリックして、MongoDBパッケージをインストールして、モジュールとして使用できるようにします。

    そのモジュールをインポートして、app.jsでmongodbクライアントオブジェクトを使用できるようにしたいと考えています。 11行目など、最初の要求（ ''）関数呼び出しの後、次のコード行を追加できます。
    <span>{
</span>  <span>"name": "NodeChatroom",
</span>  <span>"version": "0.0.0",
</span>  <span>"description": "NodeChatroom",
</span>  <span>"main": "app.js",
</span>  <span>"author": {
</span>    <span>"name": "Rami Sayar",
</span>    <span>"email": ""
</span>  <span>},
</span>  <span>"dependencies": {
</span>    <span>"express": "3.4.4",
</span>    <span>"jade": "*",
</span>    <span>"socket.io": "^1.0.6",
</span>    <span>"stylus": "*"
</span>  <span>}
</span><span>}</span>

    CustomConnSTR_MONGOLAB_URI環境変数にあるURIを使用して、データベースに接続する必要があります。接続したら、ソケット接続で受信したチャットメッセージを挿入します。

    上記のコードでわかるように、
    <span>npm install --save socket.io</span>
    プロセスを使用して環境変数値を取得します。データベースのコレクションに移動し、オブジェクトにコンテンツを含む挿入関数を呼び出します。

    すべてのメッセージがMongoDBデータベースに保存されています。

    最後の10のメッセージを発した

    もちろん、チャットルームに参加すると、ユーザーが迷子になっていると感じたくないので、受信した最後の10のメッセージをサーバーに送信するようにする必要があります。そのためには、Mongodbを接続する必要があります。この場合、データベース接続を失ってもサーバーを動作させることができるように、データベースへの1つの接続ですべてのソケットコードをラッピングすることを控えています。 また、クエリを最後の10のメッセージに並べ替えて制限したいと考えています。MongoDB生成された_IDをタイムスタンプを含んでいるため（よりスケーラブルな状況では、チャットメッセージに専用のタイムスタンプを作成する必要があります。 ）そして、結果を10のメッセージのみに制限するように制限関数を呼び出します。

    Mongodbの結果をストリーミングして、到着時にできるだけ早くチャットルームに放出できるようにします。

    上記のコードは、前の段落で説明されているようにジョブを行います。

    azure

    への展開

    過去のチュートリアル（パート2など）に従うことで、azureに再展開できます。

    結論

    http<span>.createServer(app).listen(app.get('port'), function(){
</span>  <span>console.log('Express server listening on port ' + app.get('port'));
</span><span>});</span>
    結論として、WebSocketsを介して他のすべての接続されたクライアントに受信したメッセージをブロードキャストできるチャットシステムがあります。システムはメッセージをデータベースに保存し、最後の10のメッセージを取得して、チャットルームに参加するすべての新しいユーザーにコンテキストを提供します。

    パート4！

    をお楽しみに

    パート4 - ブートストラップでチャットルームUIを構築するのはこちらです。私のTwitterアカウントに従って、この記事や他の記事について最新の状態を保つことができます。 Azureのノードの詳細

    ノードでの詳細な学習については、私のコースはMicrosoft Virtual Academyで入手できます。

    または類似のノード被験者に関するいくつかの短い形式のビデオ：

    6部構成のシリーズ：node.js

    を使用したアプリを構築します

    ノード（Coding4Fun）

    この記事は、MicrosoftのWeb Dev Techシリーズの一部です。 Project Spartanとその新しいレンダリングエンジンを皆さんと共有できることを楽しみにしています。モダンでMac、iOS、Android、またはWindowsデバイスで無料の仮想マシンを入手するか、リモートでテストしてください

    。Node.js搭載チャットルームWebアプリの構築に関するよくある質問（FAQ）

    node.js、mongodb、およびsocket.io？

    セキュリティを使用して構築されたチャットルームWebアプリのセキュリティがWebアプリケーションの重要な側面であることを確認するにはどうすればよいですか。 node.js、mongodb、およびsocket.ioで構築されたチャットルームWebアプリの場合、いくつかのセキュリティ対策を実装できます。まず、HTTPの代わりにHTTPSを使用して、サーバーとクライアント間のすべての通信が暗号化されるようにします。第二に、すべての着信データを検証して、SQL注入攻撃を防ぎます。第三に、ユーザー認証にはJWT（JSON Web Tokens）を使用します。最後に、潜在的なセキュリティの脆弱性を回避するために、すべての依存関係を最新のバージョンに定期的に更新します。

    チャットルームWebアプリの他のデータベースをnode.jsと統合できますか？柔軟性が高く、さまざまなデータベースと統合できます。 MongoDBはスケーラビリティと柔軟性のために一般的な選択肢ですが、特定のニーズに応じてMySQL、PostgreSQL、SQLiteなどの他のデータベースを使用することもできます。データベースの選択は、アプリケーションのデータ要件とデータベースの具体的な機能に大きく依存します。 node.jsチャットルームWebアプリでは、ロードバランサーを使用して、複数のサーバー全体に着信トラフィックを配布できます。また、node.jsのクラスタリングモジュールを使用して、すべてがサーバーポートを共有する子プロセスを作成することもできます。さらに、MongoDBのようなNOSQLデータベースの使用を検討してください。これは、より多くのデータを処理するために水平方向に簡単にスケーリングできることを検討してください。

    チャットルームWebアプリにはsocket.ioの代わりに他のリアルタイムテクノロジーを使用できますか？ >はい、socket.ioの代わりに使用できる他のいくつかのリアルタイムテクノロジーがあります。これらには、WebSocket、サーバーセントイベント（SSE）、およびPusherやFirebaseなどのサードパーティサービスが含まれます。これらのテクノロジーにはそれぞれ独自の長所と短所があるため、選択は特定のニーズに依存します。開発プロセスの重要な部分です。 node.jsチャットルームWebアプリの場合、MochaやJestなどのテストフレームワークを使用して、ユニットテストと統合テストを作成できます。 APIテストには、Postmanや不眠症などのツールを使用することもできます。さらに、サイプレスや操り人形師などのエンドツーエンドのテストツールを使用して、ユーザーインタラクションをシミュレートし、アプリが予想どおりに機能するようにしてください。 🎜>

    node.jsチャットルームWebアプリを展開できるプラットフォームがいくつかあります。これらには、Heroku、AWS、Google Cloud、Azureが含まれます。各プラットフォームには独自の展開プロセスがありますが、通常、アカウントを作成し、新しいプロジェクトを設定し、プラットフォームの指示に従ってアプリを展開する必要があります。

    node.jsチャットルームWebアプリにマルチメディアサポートを追加できますか？

    はい、node.jsチャットルームWebアプリにマルチメディアサポートを追加できます。これは、Multimediaファイルを保存および取得するために、CloudinaryやAWS S3などのサードパーティサービスを統合することで実行できます。 socket.ioを使用してマルチメディアデータをリアルタイムで送信および受信することもできます。チャットルームWebアプリの機能。 node.jsアプリの場合、ユーザー認証を処理するために人気のあるミドルウェアであるpassport.jsを使用できます。ローカルユーザー名とパスワード、OAUTH、JWTなど、さまざまな認証戦略をサポートしています。バックエンドテクノロジーであり、フロントエンドフレームワークまたはライブラリで動作することができます。チュートリアルではプレーンHTMLとCSSを使用していますが、React、Angular、Vue.jsなどのフロントエンドフレームワークを使用して、より複雑でインタラクティブなユーザーインターフェイスを構築できます。 APP？

    ​​

    エラー処理は、Webアプリケーションの重要な部分です。 node.jsでは、ミドルウェアを使用してエラーを処理できます。これには、エラー、リクエスト、応答、次の4つの引数を取得する特別な関数を作成することが含まれます。その後、この関数を使用してエラーを記録したり、クライアントにエラー応答を送信したり、ユーザーをエラーページにリダイレクトできます。

    以上がnode.js駆動のチャットルームWebアプリ：ノード、mongodb、ソケットを作成するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

    JavaScript sql mysql json html5 firefox css chrome safari bootstrap postman html npm angular express Object if sort for while select checkbox date format timestamp include require Error Logging using finally Event Collection channel JS console number function this windows visual studio sqlite database mongodb postgresql nosql android ios web app http https websocket microsoft azure linux ui Access Other
    声明：
    この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
    前の記事：JavaScriptとLeap Motionを使用した骨格追跡次の記事：JavaScriptとLeap Motionを使用した骨格追跡

    関連記事

    続きを見る