Vue.js WebSocket チュートリアル

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

# ソフト構成
今回使った環境のざっくり構成です。
Vue CLIで開発し、websocketのサンプルを動かします。
![vue.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/803090/bbdd782a-b708-a830-4c23-30b2f1615b6e.png)
websocketサンプルを動かすだけであればビルドする必要は無いのですが、デプロイする際にはビルドしたものが必要となるため、ビルドして動かすところまでをゴールとしました。

### websocket
HTTPを使った双方向通信です。
【参考】[今さら聞けないWebSocket~WebSocketとは~](https://qiita.com/chihiro/items/9d280704c6eff8603389) 
### Vue CLI
Vueの開発環境を手早く進めることができるツールです。

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

# １．Vue CLI 環境構築
Node.jsとVue CLIをインストールします。
【参考】[VueCLIをインストール！ ❏Vue.js❏](https://qiita.com/ITmanbow/items/9ea7d3f5a9219d760d0c) 

```terminal:コンソール
$ vue --version
@vue/cli 4.5.9
```
プロジェクトを作成します。

```terminal:コンソール
$ vue create websocket-tutorial

Vue CLI v4.5.9
? Please pick a preset: Default ([Vue 2] babel, eslint)
```
作成したプロジェクト内に移動して、開発用サーバーを立ててみる。

```terminal:コンソール
$ 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/
```
サンプルにアクセスできた。
<img width="300" alt="vue.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/803090/f6dac4f6-16bb-f347-a070-626ff74dcf04.png">




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

```vuejs: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`を押すことで開くことができます。
![wss-sample.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/803090/4aedc742-3e0b-e63f-3ead-d32b3fb5ca34.png)
webscoketで”Hello”という文字列を送信して、echoサーバーから返ってきた”Hello”を受信していることが確認できます。<font color="OrangeRed">**やったあ！**


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

```terminal:コンソール
$ npm run build
```
`dist`フォルダに`index.html`, `css`,`js`が作成されていることが確認できます。
ですが、このままhtmlをブラウザで表示しても真っ白になってしまいます。(絶対パスになっていることが原因のようです)
【参考】[Vue CLIでbuildしたWebサイトを公開する方法](https://qiita.com/ura148/items/179aec3bb8b9311db62f) 

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

```javascript:vue.config.js
module.exports = {
    publicPath: './'
}
```
無事、画面も表示されて、websocketの送受信ができることが確認できます！
<template>