溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

如何使用socket.io實現(xiàn)聊天室

發(fā)布時間：2021-08-06 14:37:40 來源：億速云 閱讀：156 作者：小新 欄目：web開發(fā)

這篇文章主要為大家展示了“如何使用socket.io實現(xiàn)聊天室”，內(nèi)容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領大家一起研究并學習一下“如何使用socket.io實現(xiàn)聊天室”這篇文章吧。

1、客戶端【index.html】代碼：

<body>
  <h4>socket簡例</h4>
  <hr>
  <div id = 'app'>
    <div>
      <div>
        <ul>
          <li v-for = 'item in msgs'>
            {{item.name}}說：{{item.content}}
          </li>
        </ul>
      </div>
      <div>
        <p><input type="text" v-model = 'msg'><button @click = 'm_send()'>發(fā)送</button></p>
      </div>
    </div>
  </div>

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

    var _vm = new Vue({
      data :　{
        name : '用戶',
        msg : '',
        msgs : [],
      },
      methods : {
        m_send : function() {

          // 向客戶端發(fā)送消息
          socket_client.emit('say_client', {
            name : this.name,
            content : this.msg
          }) ;
          this.msg = '' ;
        }
      }
    }).$mount('#app') ;


    // socket服務器
    var socket_client = io.connect('http://127.0.0.1:3000') ; 

    /**
     * 監(jiān)聽服務端發(fā)來的消息
     *
     * 1、“say_server”是客戶端發(fā)出信息時的key值
     * 2、“res”是客戶端傳來的value值
     */ 
    socket_client.on('say_server' ,function(res){

      console.log('服務端發(fā)來的消息為：', res) ;

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

  </script>
</body>

2、服務端【app.js】代碼：

const http = require('http') ;
const server = http.createServer() ;

// web服務器
const express = require('express') ;
const app = express();

app.use(express.static(__dirname + '/public'));

app.listen(8888, function () {
  console.log('web服務器成功啟動了，IP：127.0.0.1，端口號：8888') ;
});


// socket服務器

const socketio = require('socket.io') ;
const socket_server = socketio(server) ;

// 建立和客戶端的socket連接
socket_server.on('connection', function(client) {

// console.log(client) ;          // 查看連接進來的客戶端對象內(nèi)容  
// console.log(Object.keys(client)) ;    // 查看連接進來的客戶端對象的關(guān)鍵key值

  /**
   * 監(jiān)聽客戶端發(fā)來的消息
   *
   * 1、“say_client”是客戶端發(fā)出信息時的key值
   * 2、“res”是客戶端傳來的value值
   */ 
  client.on('say_client', function(res) {
    console.log('客戶端發(fā)來的消息為：', res) ;

    // 向客戶端發(fā)送消息
    socket_server.emit('say_server', res) ;
  }) ;
}) ;


server.listen(3000, function() {
  console.log('socket服務器成功啟動了，IP：127.0.0.1，端口號：3000') ;  
}) ;

以上是“如何使用socket.io實現(xiàn)聊天室”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學習更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道！

向AI問一下細節(jié)

免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手