So implementieren Sie einen Chatroom mit socket.io-js-Tutorial-php.cn

So implementieren Sie einen Chatroom mit socket.io

亚连

Freigeben： 2018-06-14 11:27:04

Original

2538 Leute haben es durchsucht

In diesem Artikel wird hauptsächlich die Verwendung von socket.io zur Implementierung eines einfachen Chatroom-Falls vorgestellt, der einen gewissen Referenzwert hat.

Das Beispiel in diesem Artikel teilt die Implementierung von socket.io mit allen. Der spezifische Code des einfachen Chatrooms ist wie folgt:

1 Client [index.html] Code:

<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>

Nach dem Login kopieren

2 .js] Code:

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;) ;  
}) ;

Nach dem Login kopieren

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

Wie sollte Webpack mit Stilen umgehen?

So generieren Sie Wortbilder in js

Was sind die Referenzmethoden für Bibliotheken in jQuery

Das obige ist der detaillierte Inhalt vonSo implementieren Sie einen Chatroom mit socket.io. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!