Vue.js+Express+Socket.IO 最小構成でリアルタイムチャットを作成する

概要

Vue.jsと組み合わせて使いたかったので、VueCLIで作成されたプロジェクトにそのまま組み込む形。VueCLIでプロジェクトを作成する方法はこちら

DBと連携する方法も記述しようかと思ったが、最小構成で謳ってしまったのでこれに関しては後日投稿するつもり。

ディレクトリ構成

chatappにfrontendとbackendディレクトリを作成後、VueCLIでfrontendディレクトリを作成。backendディレクトリは独自で作成する。

chatapp/
├ frontend/ ( VueCLIで作成されたプロジェクト )
|  ├ src/
|  └ …etc
├ backend/ (自分で作成)
├ server.js
└ …etc

インストール必要なパッケージ

クライアント側
・socket.io-client・・・socket.ioに接続するもの(socket.ioのクライアント版)

サーバー側
・express・・・Node.jsで使用するWebアプリのフレームワーク。
・socket.io・・・Websocket(リアルタイム通信のプロトコル)を簡単に実装できるパッケージ。

サーバー側の構築

参考:Express公式ドキュメント,Socket.IO公式ドキュメント

1.ディレクトリを作成してNPMプロジェクトを宣言

2.必要なパッケージをインストール

3.app.jsを作成し、処理を記述

chatapp/backend/app.js

POST_MESSAGEはクライアントからチャットが投稿されたときに発火されるイベント。
MESSAGEはクライント側のイベント。io.emit(event,data)でクライアント側のeventをdataを渡して発火する事が出来る。

4.コンソールからサーバーを起動

ブラウザで http://localhost:3000/ に接続。Hello Worldの文字が出てくればサーバー側は終わり。

クライアント側の構築

1.必要なパッケージのインストール

新しいウィンドウのコンソール起動。frontendまで移動した後で、

2. Hello.vueの編集

今回はVueCLI3でプロジェクトを作成したので、/chatapp/src/views/Hello.vueを編集する。(たしかVueCLI2でいうと /chatapp/src/pages/ にあたるところ??忘れた。)

作成する部分は次のようになる。
– socket.io-clientのimport
– 投稿フォームおよび送信ボタン
– チャットの表示
– メッセージをサーバーに送信(送信ボタンクリック時)
– 送信されたメッセージを受け取る

これらを考慮して、コーディングすると次のようになる。

↑多分ハイライトがうまく出来てない

これでクライアント側も終了なので確認に入る。

3. 作成したチャットの検証

しっかり投稿されて、リアルタイムで表示出来ているかの確認。2つのブラウザを開いて実際に投稿してみる。
画像1
完璧。

コンソールにもしっかりログが記録されている。
画像2

後処理 (Vuetifyの導入)

これで練習用としては完成で良いが、後日プレゼン用に扱う予定で、デザインがしょうもないとあれなのでVuetifyを導入してマテリアルデザインにする。

完成品

完成品と書いたが、このあともうちょい機能を加えるつもり。(画像投稿、ルーム、ログインしているユーザー一覧など)
画像3

ソースコード(Home.vueのみ)

51 件のコメント

  • Great post. I was checking constantly this blog and I
    am impressed! Very useful info particularly the last part 🙂 I
    care for such info much. I was looking for this certain information for a long time.
    Thank you and best of luck.

  • Hi there! This blog post couldn’t be written any better!
    Looking at this post reminds me of my previous roommate!
    He continually kept talking about this. I am going to send this article to him.
    Fairly certain he’ll have a good read. I appreciate you for sharing!

    buy Cialis Online canada buy cialis professional online

  • It is appropriate time to make some plans for the future
    and it is time to be happy. I have read this post and if I could I want to suggest you some interesting things
    or advice. Perhaps you could write next articles referring to this article.
    I desire to read more things about it!
    buy cialis online usa Acquistare Cialis Online Forum

  • Pretty nice post. I just stumbled upon your blog and wanted to say that I’ve truly
    enjoyed surfing around your blog posts. In any case I’ll be subscribing to your rss feed and I hope you write again very soon!
    how to get cialis prescription online canada cialis jelly online

  • Good day! I know this is kinda off topic however , I’d figured I’d ask.
    Would you be interested in exchanging links or maybe guest authoring a blog post or vice-versa?
    My site discusses a lot of the same subjects as yours and I believe we could
    greatly benefit from each other. If you’re interested feel
    free to send me an email. I look forward to hearing
    from you! Superb blog by the way!
    Viagra Doctor Prescription (Viagralim.Com) viagra naturale (http://viagralim.com/)