コミュニティ
学ぶ
ツールライブラリ
AIツール
レジャー
検索
日本語
ホームページ ウェブフロントエンド jsチュートリアル socket.ioを使用してチャットルームを実装する方法

socket.ioを使用してチャットルームを実装する方法

亚连
亚连
Jun 14, 2018 am 11:27 AM
socket.io チャットルーム

この記事では、socket.io を使用して簡単なチャット ルームを実装するケースを主に紹介します。興味のある方は参考にしてください。参考までに、具体的な内容は以下の通りです

1. クライアント [index.html] コード: 

<body>
  <h3>socket简例</h3>
  <hr>
  <p id = &#39;app&#39;>
    <p>
      <p>
        <ul>
          <li v-for = &#39;item in msgs&#39;>
            {{item.name}}说：{{item.content}}
          </li>
        </ul>
      </p>
      <p>
        <p><input type="text" v-model = &#39;msg&#39;><button @click = &#39;m_send()&#39;>发送</button></p>
      </p>
    </p>
  </p>

  <script type="text/javascript" src = &#39;https://cdn.bootcss.com/vue/2.5.9/vue.min.js&#39;></script>
  <script type="text/javascript" src = &#39;https://cdn.bootcss.com/socket.io/1.7.3/socket.io.min.js&#39;></script>
  <script type="text/javascript">

    var _vm = new Vue({
      data :　{
        name : &#39;用户&#39;,
        msg : &#39;&#39;,
        msgs : [],
      },
      methods : {
        m_send : function() {

          // 向客户端发送消息
          socket_client.emit(&#39;say_client&#39;, {
            name : this.name,
            content : this.msg
          }) ;
          this.msg = &#39;&#39; ;
        }
      }
    }).$mount(&#39;#app&#39;) ;


    // socket服务器
    var socket_client = io.connect(&#39;http://127.0.0.1:3000&#39;) ; 

    /**
     * 监听服务端发来的消息
     *
     * 1、“say_server”是客户端发出信息时的key值
     * 2、“res”是客户端传来的value值
     */ 
    socket_client.on(&#39;say_server&#39; ,function(res){

      console.log(&#39;服务端发来的消息为：&#39;, res) ;

      _vm.msgs.push(res);
    });

  </script>
</body>
ログイン後にコピー

2. サーバー [app.js] コード: 

const http = require(&#39;http&#39;) ;
const server = http.createServer() ;

// web服务器
const express = require(&#39;express&#39;) ;
const app = express();

app.use(express.static(__dirname + &#39;/public&#39;));

app.listen(8888, function () {
  console.log(&#39;web服务器成功启动了，IP：127.0.0.1，端口号：8888&#39;) ;
});


// socket服务器

const socketio = require(&#39;socket.io&#39;) ;
const socket_server = socketio(server) ;

// 建立和客户端的socket连接
socket_server.on(&#39;connection&#39;, function(client) {

// console.log(client) ;          // 查看连接进来的客户端对象内容  
// console.log(Object.keys(client)) ;    // 查看连接进来的客户端对象的关键key值

  /**
   * 监听客户端发来的消息
   *
   * 1、“say_client”是客户端发出信息时的key值
   * 2、“res”是客户端传来的value值
   */ 
  client.on(&#39;say_client&#39;, function(res) {
    console.log(&#39;客户端发来的消息为：&#39;, res) ;

    // 向客户端发送消息
    socket_server.emit(&#39;say_server&#39;, res) ;
  }) ;
}) ;


server.listen(3000, function() {
  console.log(&#39;socket服务器成功启动了，IP：127.0.0.1，端口号：3000&#39;) ;  
}) ;
ログイン後にコピー

上記は私がコンパイルしたものです皆さん、今後も役立つことを願っています。

関連記事:

Webpack はスタイルをどのように処理する必要がありますか?

jsで単語画像を生成する方法

jQueryのライブラリの参照メソッドとは何ですか

以上がsocket.ioを使用してチャットルームを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

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

AI Clothes Remover

AI Clothes Remover

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

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

Video Face Swap

Video Face Swap

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

もっと見る

人気の記事

アサシンのクリードシャドウズ：シーシェルリドルソリューション
3週間前 By DDD
Windows11 KB5054979の新しいものと更新の問題を修正する方法
2週間前 By DDD
Atomfallのクレーンコントロールキーカードを見つける場所
3週間前 By DDD
<🎜>：Dead Rails-すべての課題を完了する方法
4週間前 By DDD
Atomfall Guide：アイテムの場所、クエストガイド、およびヒント
4週間前 By DDD
もっと見る

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

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

SublimeText3 中国語版

SublimeText3 中国語版

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

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

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

もっと見る

ホットトピック

Gmailメールのログイン入り口はどこですか？
7652
15
CakePHP チュートリアル
1393
52
Steamのアカウント名の形式は何ですか
91
11
Win11 Activation Key Permanent
73
19
NYTミニクロスワードの回答
37
110
もっと見る
Related knowledge
MySQLとJavaを使った簡単なチャットルーム機能の実装方法 MySQLとJavaを使った簡単なチャットルーム機能の実装方法 Sep 21, 2023 pm 05:13 PM

MySQL と Java を使用して簡単なチャット ルーム機能を実装する方法 はじめに: 今日のソーシャル メディアの普及に伴い、人々はコミュニケーションや情報共有のためにオンライン チャットにますます依存しています。 MySQL と Java を使用して簡単なチャット ルーム機能を実装する方法は、非常に興味深く実践的なプロジェクトです。この記事では、MySQL と Java を使用してこの機能を実装する方法と、具体的なコード例を紹介します。 1. データベースを構築する まず、チャット ルーム関連の情報を保存するデータベースを MySQL に作成する必要があります。

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

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

JavaScript に基づいてリアルタイム チャット ルームを構築する JavaScript に基づいてリアルタイム チャット ルームを構築する Aug 10, 2023 pm 11:18 PM

JavaScript に基づいてリアルタイム チャット ルームを構築する インターネットの急速な発展に伴い、人々はインスタント メッセージングとリアルタイムのインタラクティブ エクスペリエンスにますます注目を集めています。一般的なインスタント メッセージング ツールとして、リアルタイム チャット ルームは個人と企業の両方にとって非常に重要です。この記事では、JavaScript を使用して簡単なリアルタイム チャット ルームを構築する方法と、対応するコード例を紹介します。まず、チャット ルームの UI インターフェイスとしてフロントエンド ページが必要です。単純な HTML 構造の例を次に示します: &lt;!DOCTYPE

ThinkPHP6 チャット ルーム開発ガイド: リアルタイム通信機能の実装 ThinkPHP6 チャット ルーム開発ガイド: リアルタイム通信機能の実装 Aug 12, 2023 pm 02:31 PM

ThinkPHP6 チャット ルーム開発ガイド: リアルタイム コミュニケーション機能の実装 はじめに: インターネットの急速な発展に伴い、リアルタイム コミュニケーションの需要も高まっています。リアルタイム コミュニケーションの一般的な方法として、チャット ルームは広く注目され、使用されています。この記事では、ThinkPHP6 フレームワークを使用してリアルタイム通信機能を実装する簡単かつ迅速な方法を説明します。 1. 環境構成: 開始する前に、開発環境を構成する必要があります。 PHP および ThinkPHP6 フレームワークがインストールされていることを確認してください。同時に、この記事では、

phpとWebsocketを使ったチャットルーム機能の開発 phpとWebsocketを使ったチャットルーム機能の開発 Dec 02, 2023 am 11:08 AM

PHP と Websocket を使用してチャット ルーム機能を開発する はじめに: インターネットの急速な発展に伴い、チャット ルームは人々が日常生活でコミュニケーションし、交流するための重要な手段の 1 つになりました。 PHP と Websocket テクノロジーを使用してチャット ルーム機能を開発すると、リアルタイムの双方向コミュニケーションが実現され、よりスムーズで便利なチャット エクスペリエンスをユーザーに提供できます。この記事では、PHP と Websocket を使用して簡単なチャット ルームを実装する方法と、具体的なコード例を紹介します。 1. 準備: 開発を開始する前に、次のことを確認する必要があります。

nginxプロキシsocket.ioサービスの落とし穴を解決する方法 nginxプロキシsocket.ioサービスの落とし穴を解決する方法 May 13, 2023 pm 12:43 PM

nginx は 2 つのソケット.io サーバーをプロキシします。 Socket.io の動作モードは、ポーリングと WebSocket へのアップグレードです。nginx 経由でサービスをリクエストすると、大量の 400 エラーが表示されます。WebSocket にアップグレードできる場合もあれば、エラーを報告し続ける場合もあります。ただし、ip+port 経由で直接アクセスすると、100% 成功します。 sidsid を分析することが問題の鍵です。最初に接続を作成するとき (ポーリング モードは長い接続をシミュレートします)、クライアントは次のようなリクエストを開始します: https://***/?eio=3&transport=polling&t=154082071

Swoole の動作: WebSocket に基づいてチャット ルームをすばやく作成します Swoole の動作: WebSocket に基づいてチャット ルームをすばやく作成します Jun 14, 2023 pm 04:20 PM

インターネット時代において、チャット ルームは人々がコミュニケーションし、社交するための重要な場所となっています。 WebSocket テクノロジーの登場により、リアルタイム通信がよりスムーズかつ安定しました。今回は、Swoole フレームワークを使用して WebSocket ベースのチャット ルームをすばやく構築する方法を紹介します。 Swoole は、C 言語で書かれた高性能 PHP コルーチン ネットワーク通信フレームワークで、非同期 IO、コルーチン、ネットワーク通信、その他の機能を統合し、Node.js のような PHP コードを作成します。

PHPとWebSocketの連携でリアルタイムチャットルームの開発を実現 PHPとWebSocketの連携でリアルタイムチャットルームの開発を実現 Jun 25, 2023 pm 01:13 PM

Web 開発の世界では、ライブ チャット機能の人気が高まっています。これにより、ユーザーはリアルタイムで簡単に対話でき、コミュニケーションと理解を強化できます。リアルタイム チャットを実装するには、WebSocket プロトコルを使用する必要があり、WebSocket リクエストを処理できるプログラミング言語が必要です。この記事では、PHP と WebSocket の統合を使用したリアルタイム チャット ルームの開発を実装する方法を紹介します。 WebSocket は、ブラウザとサーバー間のリアルタイム通信を可能にする全二重通信プロトコルです。

See all articles