Node.jsで簡単なチャットルームを作成する方法の紹介-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

Node.jsで簡単なチャットルームを作成する方法の紹介

青灯夜游

Jan 06, 2021 pm 05:56 PM

node

nodejs の使用簡単なチャットルームを作成するにはどうすればよいですか?次の記事で紹介します。一定の参考値があるので、困っている友達が参考になれば幸いです。

Node.jsで簡単なチャットルームを作成する方法の紹介

関連する推奨事項: 「

nodejs ビデオチュートリアル」

js の学習を始めたばかりです。この記事は、node.js とwebsocket は、シンプルなオンラインチャットルームシステム (チャットグループ) を実装します。

この記事は初心者が読むのに適しています。

早速、始めましょう。

B/S アーキテクチャでは、データを取得したい場合はサーバーにリクエストする必要があり、サーバーが応答します。では、クライアントがリクエストを送信しない場合、サーバーは率先してクライアント (ブラウザ) に何かを送信するのでしょうか?

答えは「いいえ」です。クライアントとサーバーは TCP/IP プロトコルを通じて接続し、次に HTTP プロトコルを通じて接続を要求します。 HTTP プロトコルはリクエストとレスポンスのプロトコルであり、ステートレスなプロトコルです。つまり、各リクエストとレスポンスの間には関係がありません。

そして、チャットルームには何が必要ですか?

1. メッセージの送信 2. メッセージの受信

メッセージの受信時: クライアントはサーバーにメッセージを送信し、サーバーはメッセージを受信し、その後

主導権を握ります別のクライアントに送信します。

したがって、HTTP

は 要件を満たすことができません。ここでは、ソケットプロトコルを使用します。サーバーとクライアントが接続されると、両方とも常にメッセージを送受信できる状態になります。

まず、npm でソケット.io モジュールをダウンロードします (その前に、node.js をインストールする必要があります)。コマンドを開きます。

(node.js チャットフォルダーを作成し、そこにファイルを配置しました)

次に、サーバーコードの記述を開始し、server.js ファイルを作成します。。

//server.js

var http = require(&#39;http&#39;);
var fs = require(&#39;fs&#39;);
var ws = require(&#39;socket.io&#39;); //引入socket.io

var server = http.createServer(function (req, res) {
    var html = fs.readFileSync(&#39;./client.html&#39;); 
   //client.html是发送给客户端的文件(客户端界面)

    res.end(html);
}).listen(8000);

var io = ws(server); //http服务与ws服务相关联, 返回io服务实例

//监听用户的连接事件
io.on(&#39;connection&#39;,function (socket) {      
    //发生在用户连接io服务器时
    console.log(&#39;有新用户进入房间&#39;);

    //消息发送事件
    socket.on(&#39;message&#39;,function (obj) {
       console.log(obj);
       io.emit(&#39;message&#39;,obj); //发送消息给所有客户端（广播）
    });
});

ログイン後にコピー

次に、クライアントの作成を開始します。

サーバーはsocket.ioを使用しているため、クライアントではsocket.ioに対応するサービスを使用する必要があります。ここではjsファイルを直接導入しました。

ファイル client.html を作成します。

//client.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Node.js+webSocket聊天室</title>
</head>
<body>
<h1>liky聊天室</h1>
<textarea name="" id="text" ></textarea>
<button id="btn">发送</button>

<script src="http://wulv5.com/js/socket.io.min.js"></script>
<script>
    var socket = io.connect("/"); //连接聊天室的io服务器 io服务器的根地址

    var oText = document.getElementById("text");
    var oBtn = document.getElementById("btn");

    var myMessage = "";

    oBtn.onclick = function () {
        var mes = oText.value;

        //当消息为空时
        if(!mes){
            return;
        }
        myMessage = mes;
        socket.send(mes); //发送消息到服务器
        oText.value = ""; //清空文本框
    }

    //当服务器广播消息时，触发message事件，消息内容在回调函数中
    socket.on(&#39;message&#39;,function (mm) {
        var p = document.createElement(&#39;p&#39;);
        p.innerText = mm;
        if(myMessage === mm){
            p.style.cssText = "color:red;margin-left:10%";
        }
        document.body.appendChild(p);
    })

</script>
</body>
</html>

ログイン後にコピー

この時点で、コード部分は完了です。次に cmd を開いてファイルを実行します。

これで、ブラウザを開いて効果を確認できます。ブラウザを開いて、アドレス http://localhost:8000/ にアクセスします。さらにいくつかのページを開いて効果を試してください。

こうして、簡単なローカルチャットルームが完成します。サーバーに転送したり、他の人とチャットしたりすることもできます（これについては時間があるときに詳しく書きます）。

プログラミング関連の知識について詳しくは、

プログラミング教育をご覧ください。！

以上がNode.jsで簡単なチャットルームを作成する方法の紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

ホットツール

ホットトピック

Gmailメールのログイン入り口はどこですか？

7467

CakePHP チュートリアル

1376

Steamのアカウント名の形式は何ですか

Win11 Activation Key Permanent

NYTの接続はヒントと回答です

Related knowledge

nvmでノードを削除する方法 Dec 29, 2022 am 10:07 AM

nvm でノードを削除する方法: 1. 「nvm-setup.zip」をダウンロードして C ドライブにインストールします; 2. 「nvm -v」コマンドで環境変数を構成し、バージョン番号を確認します; 3. 「nvm」を使用しますinstall" コマンドノードのインストール; 4. "nvm uninstall" コマンドでインストールしたノードを削除します。

Express を使用してノードプロジェクトでファイルのアップロードを処理する方法 Mar 28, 2023 pm 07:28 PM

ファイルのアップロードをどのように処理するか?次の記事では、Express を使用してノードプロジェクトでファイルのアップロードを処理する方法を紹介します。

NodeサービスのDockerミラーリングを行うにはどうすればよいですか?極限最適化の詳しい説明 Oct 19, 2022 pm 07:38 PM

この期間中、私は Tencent ドキュメントのすべてのカテゴリに共通する HTML 動的サービスを開発していましたが、さまざまなカテゴリへのアクセスの生成と展開を容易にし、クラウド移行のトレンドに従うために、Docker を使用して修正することを検討しました。サービス内容や製品バージョンを一元管理します。この記事では、私が Docker を提供するプロセスで蓄積した最適化の経験を参考として共有します。

Nodeのプロセス管理ツール「pm2」を徹底分析 Apr 03, 2023 pm 06:02 PM

この記事では、Node のプロセス管理ツール「pm2」について説明し、pm2 が必要な理由、pm2 のインストール方法と使用方法について説明します。皆様のお役に立てれば幸いです。

PIノードティーチング：PIノードとは何ですか？ PIノードをインストールしてセットアップする方法は？ Mar 05, 2025 pm 05:57 PM

ピン張りのノードの詳細な説明とインストールガイドこの記事では、ピネットワークのエコシステムを詳細に紹介します - PIノードは、ピン系生態系における重要な役割であり、設置と構成の完全な手順を提供します。 Pinetworkブロックチェーンテストネットワークの発売後、PIノードは多くの先駆者の重要な部分になり、テストに積極的に参加し、今後のメインネットワークリリースの準備をしています。まだピン張りのものがわからない場合は、ピコインとは何かを参照してください。リストの価格はいくらですか？ PIの使用、マイニング、セキュリティ分析。パインワークとは何ですか？ピン競技プロジェクトは2019年に開始され、独占的な暗号通貨PIコインを所有しています。このプロジェクトは、誰もが参加できるものを作成することを目指しています

pkg を使用して Node.js プロジェクトを実行可能ファイルにパッケージ化する方法について説明します。 Dec 02, 2022 pm 09:06 PM

Nodejs実行可能ファイルをpkgでパッケージ化するにはどうすればよいですか?次の記事では、pkg を使用して Node プロジェクトを実行可能ファイルにパッケージ化する方法を紹介します。

npm ノード gyp が失敗した場合の対処方法 Dec 29, 2022 pm 02:42 PM

「node-gyp.js」が「Node.js」のバージョンと一致しないため、npm node gyp が失敗します。解決策は次のとおりです: 1. 「npm cache clean -f」を使用してノードキャッシュをクリアします; 2. 「npm install -」を使用します。 g n" n モジュールをインストールします。 3. 「n v12.21.0」コマンドを使用して、「node v12.21.0」バージョンをインストールします。