如何使用socket.io實現聊天室

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

10多年的遼源網站建設經驗，針對設計、前端、開發、售后、文案、推廣等六對一服務，響應快，48小時及時工作處理。成都全網營銷的優勢是能夠根據用戶設備顯示端的尺寸不同，自動調整遼源建站的顯示方式，使網站能夠適用不同顯示終端，在瀏覽器中調整網站的寬度，無論在任何一種瀏覽器上瀏覽網站，都能展現優雅布局與設計，從而大程度地提升瀏覽體驗。成都創新互聯公司從事“遼源網站設計”,“遼源網站推廣”以來，每個客戶項目都認真落實執行。

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()'>發送</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() {

          // 向客戶端發送消息
          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') ; 

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

      console.log('服務端發來的消息為：', 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) ;          // 查看連接進來的客戶端對象內容  
// console.log(Object.keys(client)) ;    // 查看連接進來的客戶端對象的關鍵key值

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

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


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

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

名稱欄目：如何使用socket.io實現聊天室
文章地址：http://m.kartarina.com/article28/gesicp.html

成都網站建設公司_創新互聯，為您提供軟件開發、網站改版、網站策劃、關鍵詞優化、小程序開發、建站公司

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源：創新互聯

猜你還喜歡下面的內容