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のみ)

203 件のコメント

  • 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/)

  • Google

    Every when inside a though we select blogs that we read. Listed below would be the latest websites that we select.

  • 토토사이트

    […]very handful of web sites that come about to become comprehensive beneath, from our point of view are undoubtedly nicely really worth checking out[…]

  • 코인카지노

    […]although web-sites we backlink to below are considerably not related to ours, we feel they are in fact worth a go through, so have a look[…]

  • Google

    Check beneath, are some totally unrelated internet sites to ours, nonetheless, they’re most trustworthy sources that we use.

  • charlotte cbd

    […]we like to honor numerous other world-wide-web sites on the net, even though they aren’t linked to us, by linking to them. Underneath are some webpages really worth checking out[…]

  • bondage toys

    […]we like to honor many other world wide web internet sites around the web, even when they aren’t linked to us, by linking to them. Beneath are some webpages really worth checking out[…]

  • safestore auto

    […]very couple of sites that come about to be comprehensive beneath, from our point of view are undoubtedly effectively worth checking out[…]

  • g suite promo code india

    […]Wonderful story, reckoned we could combine a couple of unrelated information, nevertheless truly worth taking a search, whoa did one master about Mid East has got much more problerms too […]

  • sexy girl shows

    […]we prefer to honor numerous other web web sites around the web, even though they aren’t linked to us, by linking to them. Below are some webpages really worth checking out[…]

  • THC Vape Oil

    […]just beneath, are numerous absolutely not connected web sites to ours, however, they’re certainly really worth going over[…]

  • amazon

    […]Wonderful story, reckoned we could combine several unrelated information, nonetheless seriously really worth taking a search, whoa did a single master about Mid East has got far more problerms as well […]

  • sex shows

    […]that could be the finish of this article. Here you will uncover some web-sites that we consider you’ll appreciate, just click the hyperlinks over[…]

  • sexy

    […]the time to study or check out the content material or web pages we have linked to below the[…]

  • CBD gummies

    […]Wonderful story, reckoned we could combine a number of unrelated information, nevertheless really worth taking a search, whoa did a single learn about Mid East has got additional problerms also […]

  • Cool Apps

    […]we prefer to honor a lot of other net web-sites on the internet, even when they aren’t linked to us, by linking to them. Beneath are some webpages worth checking out[…]

  • THC VAPE OIL FOR SALE

    […]we like to honor quite a few other web web sites on the web, even though they aren’t linked to us, by linking to them. Underneath are some webpages really worth checking out[…]

  • Thc vape juice

    […]although internet sites we backlink to below are considerably not connected to ours, we feel they may be in fact really worth a go as a result of, so possess a look[…]

  • Author

    […]Wonderful story, reckoned we could combine some unrelated information, nonetheless genuinely really worth taking a search, whoa did one learn about Mid East has got additional problerms also […]

  • Dank cartridges

    […]Wonderful story, reckoned we could combine several unrelated information, nevertheless definitely worth taking a search, whoa did a single understand about Mid East has got a lot more problerms as well […]

  • buying ketamine

    […]we prefer to honor lots of other internet websites on the net, even when they aren’t linked to us, by linking to them. Beneath are some webpages worth checking out[…]

  • CBD

    […]please take a look at the web sites we stick to, including this 1, as it represents our picks through the web[…]

  • CBD

    […]just beneath, are numerous completely not related web-sites to ours, having said that, they may be certainly really worth going over[…]

  • CBD

    […]we prefer to honor numerous other world wide web websites around the net, even when they aren’t linked to us, by linking to them. Beneath are some webpages worth checking out[…]

  • CBD

    […]very handful of internet sites that come about to be comprehensive below, from our point of view are undoubtedly properly really worth checking out[…]

  • CBD

    […]although web-sites we backlink to beneath are considerably not associated to ours, we feel they are actually really worth a go by means of, so possess a look[…]

  • CBD

    […]Wonderful story, reckoned we could combine several unrelated information, nonetheless definitely really worth taking a appear, whoa did a single master about Mid East has got far more problerms as well […]

  • CBD

    […]we prefer to honor numerous other world-wide-web sites around the web, even if they aren’t linked to us, by linking to them. Beneath are some webpages worth checking out[…]

  • CBD oil

    […]very few internet websites that happen to become detailed below, from our point of view are undoubtedly very well really worth checking out[…]

  • best CBD oil

    […]although internet websites we backlink to below are considerably not associated to ours, we really feel they are truly worth a go by way of, so have a look[…]

  • anal play

    […]Every when inside a even though we decide on blogs that we read. Listed beneath are the most recent web pages that we choose […]

  • best CBD

    […]please take a look at the internet sites we follow, such as this a single, as it represents our picks from the web[…]

  • free download for windows

    […]we like to honor many other net websites around the web, even though they aren’t linked to us, by linking to them. Underneath are some webpages really worth checking out[…]

  • oral tips

    […]although websites we backlink to below are considerably not related to ours, we really feel they’re basically really worth a go by way of, so have a look[…]

  • THC Oil

    […]although sites we backlink to beneath are considerably not associated to ours, we feel they are in fact worth a go by, so possess a look[…]

  • cannabis culture

    […]check below, are some absolutely unrelated internet websites to ours, having said that, they are most trustworthy sources that we use[…]

  • dildo vibrator

    […]Wonderful story, reckoned we could combine several unrelated data, nonetheless seriously worth taking a look, whoa did one understand about Mid East has got more problerms as well […]

  • rijschool rotterdam

    […]although web-sites we backlink to below are considerably not related to ours, we feel they’re in fact really worth a go by means of, so have a look[…]

  • Contact Details

    […]very couple of web-sites that take place to become comprehensive below, from our point of view are undoubtedly effectively worth checking out[…]

  • dildo use

    […]here are some links to web-sites that we link to for the reason that we assume they are really worth visiting[…]