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

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

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

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

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

<body>
  <h3>socket簡(jiǎn)例</h3>
  <hr>
  <div id = 'app'>
    <div>
      <div>
        <ul>
          <li v-for = 'item in msgs'>
            {{item.name}}說(shuō)：{{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)聽(tīng)服務(wù)端發(fā)來(lái)的消息
     *
     * 1、“say_server”是客戶端發(fā)出信息時(shí)的key值
     * 2、“res”是客戶端傳來(lái)的value值
     */ 
    socket_client.on('say_server' ,function(res){

      console.log('服務(wù)端發(fā)來(lái)的消息為：', 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ù)器成功啟動(dòng)了，IP：127.0.0.1，端口號(hào)：8888') ;
});


// socket服務(wù)器

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

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

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

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

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


server.listen(3000, function() {
  console.log('socket服務(wù)器成功啟動(dòng)了，IP：127.0.0.1，端口號(hào)：3000') ;  
}) ;

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

您可能感興趣的文章:

相關(guān)文章

深入剖析Node.js cluster模塊
Node的單線程設(shè)計(jì)已經(jīng)沒(méi)法更充分的"壓榨"機(jī)器性能了，Node新增了一個(gè)內(nèi)置模塊cluster，它可以通過(guò)一個(gè)父進(jìn)程管理一坨子進(jìn)程的方式來(lái)實(shí)現(xiàn)集群的功能，這篇文章主要介紹了深入剖析Node.js cluster模塊，感興趣的小伙伴們可以參考一下
2018-05-05
Node.js 中的 Buffer緩沖區(qū)實(shí)例詳解
Buffer 是 Node.js 提供的用于處理二進(jìn)制數(shù)據(jù)的類,在瀏覽器中我們可以使用 Blob 或 ArrayBuffer,但 Node 環(huán)境下使用 Buffer 更加高效和靈活,本文給大家介紹Node.js 中的 Buffer緩沖區(qū),感興趣的朋友一起看看吧
2025-04-04
node.js學(xué)習(xí)之base64編碼解碼
開(kāi)發(fā)者對(duì)Base64編碼肯定很熟悉，是否對(duì)它有很清晰的認(rèn)識(shí)就不一定了。實(shí)際上Base64已經(jīng)簡(jiǎn)單到不能再簡(jiǎn)單了，這篇文章給大家通過(guò)示例代碼介紹了node.js對(duì)字符串和圖片base64編碼解碼的方法，有需要的朋友們可以通過(guò)本文來(lái)進(jìn)行學(xué)習(xí)，下面來(lái)一起看看吧。
2016-10-10
Windows下Node.js安裝及環(huán)境配置方法
這篇文章主要為大家介紹一下Node.js安裝及環(huán)境配置方法，這也是腳本之家小編發(fā)現(xiàn)的比較詳細(xì)的教程了，從安裝到配置都很詳細(xì)，想學(xué)習(xí)Node.js的朋友可以參考一下
2017-09-09
一文講解如何把已安裝的nodejs高版本降級(jí)為低版本
部分老舊項(xiàng)目需要使用低版本的node,網(wǎng)上很多是無(wú)效的,高版本無(wú)法直接安裝低版本node,但是低版本nodejs可以安裝部分高版本node,從而達(dá)到升級(jí)效果,下面這篇文章主要給大家介紹了關(guān)于如何把已安裝的nodejs高版本降級(jí)為低版本的相關(guān)資料,需要的朋友可以參考下
2024-06-06
WebSocket Node構(gòu)建HTTP隧道實(shí)現(xiàn)實(shí)例
這篇文章主要為大家介紹了WebSocket Node構(gòu)建HTTP隧道實(shí)現(xiàn)實(shí)例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
2023-11-11
Node.js之構(gòu)建WebSocket服務(wù)全過(guò)程
這篇文章主要介紹了Node.js之構(gòu)建WebSocket服務(wù)全過(guò)程,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-09-09
node?NPM庫(kù)qs?iconv-lite字符串編碼轉(zhuǎn)換及解析URL查詢學(xué)習(xí)
這篇文章主要為大家介紹了node?NPM庫(kù)之qs解析URL查詢字符串及iconv-lite字符串編碼轉(zhuǎn)換學(xué)習(xí)，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-07-07
Node.js環(huán)境下JavaScript實(shí)現(xiàn)單鏈表與雙鏈表結(jié)構(gòu)
Node環(huán)境下通過(guò)npm可以獲取list的幾個(gè)相關(guān)庫(kù),但是我們這里注重于自己動(dòng)手實(shí)現(xiàn),接下來(lái)就一起來(lái)看一下Node.js環(huán)境下JavaScript實(shí)現(xiàn)單鏈表與雙鏈表結(jié)構(gòu)
2016-06-06
全面了解Node事件循環(huán)
這篇文章主要詳細(xì)介紹了Node事件循環(huán)，文中的圖片以及文字講解可以幫助大家更好的了解事件循環(huán)，感興趣的小伙伴可以看一看，多多參考一下
2021-08-08