ホームページ > 記事 > ウェブフロントエンド > socket.ioを使用してチャットルームを実装する方法

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

亚连オリジナル: 2018-06-14 11:27:042408ブラウズ

この記事では、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 までご連絡ください。

前の記事：Angular+コンポーネントの使い方次の記事：Angular+コンポーネントの使い方

続きを見る