Vue.js WebSocket チュートリアル

目的

この記事ではVue.js WebSocket Tutorial の内容を参考に、Vue + Websocketを実現する方法をVue初心者向けに説明します。
Vue経験者であれば上記リンクを見て簡単にできてしまう内容ですが、自分と同じように**「Vue初心者、なんならjsやHTMLも初心者だけどVueとwebsocketを使いたい！」**という方がいると想定し、この記事を書いています。

ソフト構成

今回使った環境のざっくり構成です。
Vue CLIで開発し、websocketのサンプルを動かします。

websocketサンプルを動かすだけであればビルドする必要は無いのですが、デプロイする際にはビルドしたものが必要となるため、ビルドして動かすところまでをゴールとしました。

websocket

HTTPを使った双方向通信です。
【参考】今さら聞けないWebSocket~WebSocketとは~

Vue CLI

Vueの開発環境を手早く進めることができるツールです。

手順

１．Vue CLI 環境構築
２．Vue + websocketの実装
３．ビルドして動かす

１．Vue CLI 環境構築

Node.jsとVue CLIをインストールします。
【参考】VueCLIをインストール！ ❏Vue.js❏

コンソール

$ vue --version
@vue/cli 4.5.9

プロジェクトを作成します。

コンソール

$ vue create websocket-tutorial

Vue CLI v4.5.9
? Please pick a preset: Default ([Vue 2] babel, eslint)

作成したプロジェクト内に移動して、開発用サーバーを立ててみる。

コンソール

$ npm run serve

 DONE  Compiled successfully in 2376ms                                                                           5:02:22

  App running at:
  - Local:   http://localhost:8080/
  - Network: http://192.168.128.104:8080/

サンプルにアクセスできた。

２．Vue + websocketの実装

作成したプロジェクトのフォルダを見てみると、たくさんのファイルが生成されていますが、今回はsrcの中のApp.vueのみ編集します。サンプルの中身を消して、以下をそのままコピペしてください。

App.vue

<template>
  <div id="app">
    <h2>Vue.js WebSocket Tutorial</h2> 
    <button v-on:click="sendMessage('hello')">Send Message</button>
  </div>
</template>

<script>
export default {
  name: 'App',
  data: function() {
    return {
      connection: null
    }
  },
  methods: {
    sendMessage: function(message) {
      console.log("Hello")
      console.log(this.connection);
      this.connection.send(message);
    }
  },
  created: function() {
    console.log("Starting connection to WebSocket Server")
    this.connection = new WebSocket("wss://echo.websocket.org")

    this.connection.onmessage = function(event) {
      console.log(event);
    }

    this.connection.onopen = function(event) {
      console.log(event)
      console.log("Successfully connected to the echo websocket server...")
    }

  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

ファイルを保存すると、開発サーバーのブラウザにWebSocket Tutorialの画面が表示されます。
Send Messageのボタンを押すと、WebSocketのデータがechoサーバーに送信されますが、画面上では確認できないため、コンソールで確認してみます。コンソール画面はF12を押すことで開くことができます。

webscoketで”Hello”という文字列を送信して、echoサーバーから返ってきた”Hello”を受信していることが確認できます。やったあ！

３．ビルドして動かす

Vueファイルはそのままの形ではデプロイすることができないため、ビルドしてデプロイできる形にします。

コンソール

$ npm run build

distフォルダにindex.html, css,jsが作成されていることが確認できます。
ですが、このままhtmlをブラウザで表示しても真っ白になってしまいます。(絶対パスになっていることが原因のようです)
【参考】Vue CLIでbuildしたWebサイトを公開する方法

対処法として、vue.config.jsを作成して、以下をコピペしてビルドしてください。

vue.config.js

module.exports = {
    publicPath: './'
}

無事、画面も表示されて、websocketの送受信ができることが確認できます！