快捷導(dǎo)航

使用socket.io實現(xiàn)簡單聊天室案例

更新時間：2018年01月02日 13:56:18 作者：宇智波幽助

這篇文章主要介紹了使用socket.io實現(xiàn)簡單聊天室案例，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了socket.io實現(xiàn)簡單聊天室的具體代碼，供大家參考，具體內(nèi)容如下

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

<body>
  <h3>socket簡例</h3>
  <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服務(wù)器
    var socket_client = io.connect('http://127.0.0.1:3000') ; 

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

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

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

  </script>
</body>

2、服務(wù)端【app.js】代碼：

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

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

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

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


// socket服務(wù)器

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服務(wù)器成功啟動了，IP：127.0.0.1，端口號：3000') ;  
}) ;

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: