Vue+express+Socketでチャット機能を実現

npm i vue-socket.io --save

'vue-socket.io' から VueSocketIO をインポートします。

npm i socket.io --save

var io = require('socket.io')(サーバー)'

io.on('接続', (ソケット) => {
  socket.on('地雷除去', (データ) => {
    コンソールにログ出力します。
  });
});

<div class="home">
    ユーザーID: <input type="text" v-model="userid">
    ニックネーム: <input type="text" v-model="name">
    メッセージ: <input type="text" v-model="msg" />
    <button @click="send">送信</button>
    <button @click="join">接続</button>
    <button @click="sendmsg">指定した人に送信</button>

    <ul>
      <li v-for="(item,index) チャットリスト内" :key="item.name + index">
        {{ item.name }} はこう言っています: {{ item.msg }}
      </li>
    </ul>
</div>

エクスポートデフォルト{
  名前: "ホーム",
  データ（） {
    戻る {
      ユーザー: [],
      メッセージ: "",
      チャットリスト: [],
      名前： ''、
      ユーザーID： ''
    };
  },
  ソケット: {
    // バックグラウンドソケットに接続する
    接続する（） {
      console.log('ソケットが接続されました');
    },
    // ユーザーのバックグラウンド呼び出し、データの追加 sendMessage(data) {
      コンソールにログ出力します。
      this.chatList.push(データ)
    },
    // ユーザーのバックグラウンド呼び出し、データの印刷receivemsg(data) {
      console.log('メッセージを受信');
      コンソールにログ出力します。
    }
  },
  メソッド: {
    // バックグラウンドにメッセージを送信する send() {
      // バックグラウンドソケットのメッセージメソッドを呼び出すには、emit を使用します。this.$socket.emit("message", {
        ユーザーID: 100,
        名前: this.name,
        メッセージ: this.msg
      });
    },
    // ユーザー接続を確立する join() {
      this.$socket.emit("join", {
        ユーザーID: this.userid
      });
    },
    // プライベートメッセージングのためにバックエンドにメッセージを送信する sendmsg() {
      this.$socket.emit("sendmsg", {
        ユーザーID: this.userid、
        メッセージ: this.msg
      });
    }
  }
};

// プライベートチャット機能を実装するために各ユーザーのソケットを保存するために使用します。let arrAllSocket = {}
// ソケット接続を作成する io.on('connection', (socket) => {
  console.log('接続されました');
  // コンソールログ(ソケット);
  // join関数はユーザーが接続するために使用されます socket.on('join', function (obj) {
    console.log(obj.userid + '参加')
    // プライベートメッセージングの各ユーザーの接続ステータスを保存します arrAllSocket[obj.userid] = socket
  })
  // フォアグラウンドから送信されたメッセージを受信する関数名は message です
  socket.on('メッセージ', (データ) => {
    コンソールにログ出力します。
    //メッセージをフロントデスクに送り返す（フロントデスクで定義されたメソッドを呼び出す）関数名はsendMessage
    io.emit('sendMessage', データ);
  });
  // プライベートメッセージ socket.on('sendmsg', function (data) {
    コンソールにログ出力します。
    // ユーザー接続を照会する let target = arrAllSocket[data.userid]
    if (ターゲット) {
      //指定された人にメッセージを送信する target.emit('receivemsg', data)
    }
  })
})

// server をパラメータとして渡す module.exports = function (server) {
  var io = require('socket.io')(サーバー);
// プライベートチャット機能を実装するために各ユーザーのソケットを保存するために使用します。let arrAllSocket = {}
// ソケット接続を作成する io.on('connection', (socket) => {
    console.log('接続されました');
    // コンソールログ(ソケット);
    // join関数はユーザーが接続するために使用されます socket.on('join', function (obj) {
      console.log(obj.userid + '参加')
      // プライベートメッセージングの各ユーザーの接続ステータスを保存します arrAllSocket[obj.userid] = socket
    })
    // フォアグラウンドから送信されたメッセージを受信する関数名は message です
    socket.on('メッセージ', (データ) => {
      コンソールにログ出力します。
      //メッセージをフロントデスクに送り返す（フロントデスクで定義されたメソッドを呼び出す）関数名はsendMessage
      io.emit('sendMessage', データ);
    });
    // プライベートメッセージ socket.on('sendmsg', function (data) {
      コンソールにログ出力します。
      // ユーザー接続を照会する let target = arrAllSocket[data.userid]
      if (ターゲット) {
        //指定された人にメッセージを送信する target.emit('receivemsg', data)
      }
    })
  })
}

var io = require('../io')
io(サーバー)