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

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

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

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)) ;    // 查看連接進來的客戶端對象的關鍵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)容對大家有所幫助，如果還想學習更多知識，歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

名稱欄目：如何使用socket.io實現(xiàn)聊天室
文章地址：http://muchs.cn/article28/gesicp.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供軟件開發(fā)、網(wǎng)站改版、網(wǎng)站策劃、關鍵詞優(yōu)化、小程序開發(fā)、建站公司

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

猜你還喜歡下面的內(nèi)容