socket.ioとvue.jsを利用したチャット作りましょう

こんにちは！
node.jsのモジュールであるsocket.ioを利用してチャットを作ってみました。

socket.ioとは？

socket.ioはサーバとブラウザを双方向通信を可能にするnode.jsのモジュールです。HTML5のwebsocketプロトコルを基に様々なブラウザで動作する双方向通信が可能なアプリケーションを作ることができます。
socket.ioを利用すればチャットルームのようにリアルタイムにデータが伝送されるようなチャットを簡単に作るのができます。

websocketとは

ウェブサーバの一つのポートでこの中で接続したクライアントが自由にデータをやり取りする方式です。
元来はクライアントからの要請があればサーバはそれに応答していたが、websocketはクライアントからの要請があったときにつながっている全てのクライアントに変更事項を伝達する仕組みです。
つまり、クライアントからの要請なしでもサーバの変更事項をクライアントにリアルタイムに配信できるようになりました。

実装

サーバはexpress、フロントアンドはvue.jsを使用しました
↓はサーバコードです。とても簡単なコードでエクスプレスでサーバーを構成し socket.ioを連結しました。

app.js

const express = require('express');

const app = express();

const server = app.listen(3001, function() {
    console.log('server running on port 3001');
});

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

io.on('connection', function(socket) {
    socket.on('SEND_MESSAGE', function(data) {
        io.emit('MESSAGE', data)
    });
});

socketサーバーはクライアントの受信を'SEND_MESSAGE' という名前で待機し、この要請があったときにemitメソッドを通じて接続されたクライアントにデータを送信します。


↑のサーバコードを見れば、「MESSAGE」でサーバのデータを受信待機し、「SEND_MESSAGE」にデータを転送する仕組みです

<template>
  <div>
    <h1>チャット</h1>
    <ul>
      <li v-for="(msg, index) in messages" :key="index">{{msg.message}}</li>
    </ul>
    <div>
      <input type="text" @keyup.enter="sendMessage()" v-model="message">
    </div>
  </div>
</template>

<script>
import io from 'socket.io-client';

export default {
  name: 'room',
  data() {
    return {
      messages: [],
      // 1) サーバ連結
      socket : io('localhost:3001')
    }
  },
  methods: {
    sendMessage(message) {
      // 2) メッセージをサーバで送信
      this.socket.emit('SEND_MESSAGE', {message});
    }
  },
  mounted() {
    // 3) サーバの変更内容を受信
    this.socket.on('MESSAGE', (data) => {
        this.messages = [...this.messages, data];
    });
  }
}
</script>

これまでチャットためのクライアントとサーバの基本仕組みを作成してみました。
上のコードを通じてどのようにデータが行き来するかを理解することができました。

参考