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

560 件のコメント

  • 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[…]

  • mens rings online

    […]that would be the end of this post. Here you’ll discover some websites that we consider you’ll appreciate, just click the hyperlinks over[…]

  • apps for pc

    […]Wonderful story, reckoned we could combine several unrelated data, nonetheless actually worth taking a appear, whoa did 1 find out about Mid East has got a lot more problerms too […]

  • free pc games download

    […]Wonderful story, reckoned we could combine a number of unrelated data, nonetheless really really worth taking a search, whoa did one particular master about Mid East has got additional problerms also […]

  • Local University

    […]we like to honor numerous other online websites on the net, even when they aren’t linked to us, by linking to them. Beneath are some webpages really worth checking out[…]

  • naughty nurse

    […]just beneath, are quite a few completely not associated web sites to ours, having said that, they are certainly really worth going over[…]

  • chubby dildo

    […]just beneath, are quite a few completely not connected web sites to ours, on the other hand, they’re surely worth going over[…]

  • Royal CBD

    […]although websites we backlink to beneath are considerably not associated to ours, we really feel they’re basically worth a go via, so possess a look[…]

  • CBD cream

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

  • Atta chakki

    […]check beneath, are some absolutely unrelated web-sites to ours, having said that, they are most trustworthy sources that we use[…]

  • dank vapes

    […]although internet websites we backlink to beneath are considerably not related to ours, we really feel they are truly worth a go through, so possess a look[…]

  • best CBD oil

    […]check beneath, are some entirely unrelated internet sites to ours, nonetheless, they’re most trustworthy sources that we use[…]

  • African Grey

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

  • Magazines

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

  • real feel dildo

    […]Wonderful story, reckoned we could combine several unrelated information, nonetheless truly really worth taking a look, whoa did one study about Mid East has got extra problerms too […]

  • slim dong

    […]just beneath, are a lot of absolutely not related web sites to ours, having said that, they are certainly worth going over[…]

  • Exotic carts

    […]Every once in a while we select blogs that we read. Listed beneath would be the most up-to-date web-sites that we pick out […]

  • best CBD oil for arthritis

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

  • best CBD capsules

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

  • best CBD gummies

    […]that could be the end of this write-up. Here you will come across some internet sites that we assume you will value, just click the links over[…]

  • buy CBD oil

    […]just beneath, are a lot of completely not associated web-sites to ours, even so, they may be surely really worth going over[…]

  • best CBD oil for sleep

    […]we like to honor several other online web sites around the web, even though they aren’t linked to us, by linking to them. Under are some webpages worth checking out[…]

  • best CBD oil for arthritis

    […]Wonderful story, reckoned we could combine a number of unrelated data, nonetheless really really worth taking a look, whoa did one particular understand about Mid East has got much more problerms also […]

  • best CBD capsules

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

  • best CBD oil

    […]that will be the end of this post. Right here you’ll obtain some internet sites that we believe you will enjoy, just click the links over[…]

  • best CBD oil

    […]that may be the finish of this post. Here you will locate some websites that we think you will appreciate, just click the hyperlinks over[…]

  • best CBD oil

    […]we prefer to honor quite a few other internet websites around the internet, even if they aren’t linked to us, by linking to them. Below are some webpages worth checking out[…]

  • best CBD gummies

    […]although websites we backlink to below are considerably not related to ours, we really feel they may be truly really worth a go via, so have a look[…]

  • best CBD gummies

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

  • best CBD oil

    […]although sites we backlink to below are considerably not connected to ours, we feel they may be truly worth a go by, so have a look[…]

  • free download for windows 10

    […]Wonderful story, reckoned we could combine several unrelated information, nonetheless actually really worth taking a look, whoa did a single learn about Mid East has got additional problerms as well […]

  • app download for pc

    […]we prefer to honor many other web web sites on the internet, even if they aren’t linked to us, by linking to them. Under are some webpages worth checking out[…]

  • make money online

    […]that is the end of this report. Right here you’ll locate some web pages that we consider you will enjoy, just click the hyperlinks over[…]

  • click here

    […]check beneath, are some absolutely unrelated web sites to ours, nonetheless, they are most trustworthy sources that we use[…]

  • kratom near me

    […]although websites we backlink to beneath are considerably not connected to ours, we really feel they’re really really worth a go by means of, so have a look[…]

  • CBD oils UK

    […]although web sites we backlink to below are considerably not associated to ours, we feel they may be actually really worth a go through, so possess a look[…]

  • best CBD oils UK

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

  • CBD oils

    […]just beneath, are quite a few entirely not associated internet sites to ours, however, they may be certainly really worth going over[…]

  • Diazepam for sale

    […]that will be the finish of this article. Right here you’ll uncover some internet sites that we assume you will value, just click the links over[…]

  • File share

    […]just beneath, are several totally not related websites to ours, having said that, they are certainly really worth going over[…]

  • Earn Money Online

    […]very few internet websites that take place to become comprehensive beneath, from our point of view are undoubtedly very well really worth checking out[…]

  • Earn Money Online

    […]Wonderful story, reckoned we could combine a number of unrelated information, nevertheless genuinely worth taking a search, whoa did 1 master about Mid East has got far more problerms also […]

  • games for pc download

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

  • flow bar nz

    […]very handful of web sites that take place to become detailed below, from our point of view are undoubtedly very well worth checking out[…]

  • Umzugsfirma Wien

    […]Wonderful story, reckoned we could combine a number of unrelated data, nonetheless really worth taking a search, whoa did one master about Mid East has got more problerms too […]

  • Jed Fernandez

    […]very handful of sites that happen to be detailed below, from our point of view are undoubtedly properly worth checking out[…]

  • Sonia Randhawa

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

  • Chiang Mai

    […]very handful of web sites that occur to become in depth beneath, from our point of view are undoubtedly properly worth checking out[…]

  • Sonia Randhawa

    […]very couple of sites that occur to become comprehensive below, from our point of view are undoubtedly properly worth checking out[…]

  • kratom near me

    […]that will be the finish of this report. Right here you will come across some web pages that we consider you will enjoy, just click the hyperlinks over[…]

  • Amsterdam escorts

    […]that may be the finish of this write-up. Right here you’ll find some web sites that we think you’ll enjoy, just click the hyperlinks over[…]

  • Sonia Randhawa

    […]check below, are some completely unrelated websites to ours, nevertheless, they may be most trustworthy sources that we use[…]

  • 5euros

    […]Wonderful story, reckoned we could combine several unrelated data, nonetheless definitely worth taking a appear, whoa did 1 find out about Mid East has got far more problerms at the same time […]

  • SEO Sydney

    […]please pay a visit to the internet sites we comply with, like this one particular, because it represents our picks in the web[…]

  • 5euros

    […]Wonderful story, reckoned we could combine some unrelated data, nonetheless genuinely worth taking a search, whoa did one particular discover about Mid East has got more problerms also […]

  • Webinar Workshop

    […]although internet sites we backlink to below are considerably not associated to ours, we feel they may be really worth a go by way of, so possess a look[…]

  • Reverse telephone directory

    […]Wonderful story, reckoned we could combine a few unrelated data, nonetheless genuinely worth taking a appear, whoa did one understand about Mid East has got much more problerms at the same time […]

  • عزة وثقة

    […]very few internet sites that occur to become in depth below, from our point of view are undoubtedly effectively worth checking out[…]

  • الغدر

    […]check below, are some absolutely unrelated internet sites to ours, even so, they may be most trustworthy sources that we use[…]

  • حلوه

    […]very couple of web sites that occur to become detailed beneath, from our point of view are undoubtedly effectively really worth checking out[…]

  • حزن

    […]check below, are some totally unrelated internet sites to ours, nevertheless, they may be most trustworthy sources that we use[…]

  • RoyalCBD

    […]please take a look at the web-sites we follow, like this 1, because it represents our picks through the web[…]

  • RoyalCBD

    […]just beneath, are many totally not related web sites to ours, even so, they are certainly really worth going over[…]

  • RoyalCBD

    […]please take a look at the sites we adhere to, including this a single, as it represents our picks from the web[…]

  • RoyalCBD

    […]Wonderful story, reckoned we could combine a number of unrelated information, nevertheless seriously worth taking a look, whoa did one understand about Mid East has got a lot more problerms as well […]

  • Royal CBD

    […]that could be the end of this article. Right here you will find some web sites that we think you’ll value, just click the links over[…]

  • cbd oil wyoming

    […]very handful of websites that occur to be in depth below, from our point of view are undoubtedly very well really worth checking out[…]

  • Royal CBD

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

  • RoyalCBD

    […]although sites we backlink to beneath are considerably not connected to ours, we feel they may be truly really worth a go via, so have a look[…]

  • RoyalCBD

    […]very couple of internet sites that occur to be detailed below, from our point of view are undoubtedly nicely worth checking out[…]

  • RoyalCBD.com

    […]very handful of internet websites that take place to become comprehensive beneath, from our point of view are undoubtedly well really worth checking out[…]

  • RoyalCBD

    […]just beneath, are several absolutely not connected internet sites to ours, having said that, they’re surely really worth going over[…]

  • tennessee cbd

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

  • cbd ohio

    […]Every when inside a when we choose blogs that we study. Listed beneath would be the newest websites that we choose […]

  • cbd oil new mexico

    […]that is the end of this write-up. Here you will discover some internet sites that we assume you will enjoy, just click the hyperlinks over[…]

  • is cbd legal in new jersey

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

  • RoyalCBD

    […]Every after in a while we select blogs that we study. Listed below are the most current web sites that we select […]

  • kentucky cbd

    […]that will be the finish of this post. Right here you will come across some sites that we consider you’ll enjoy, just click the hyperlinks over[…]

  • RoyalCBD.com

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

  • florida

    […]Wonderful story, reckoned we could combine a few unrelated information, nonetheless seriously worth taking a appear, whoa did one particular discover about Mid East has got extra problerms at the same time […]

  • Royal CBD

    […]just beneath, are a lot of entirely not related web sites to ours, nonetheless, they’re certainly really worth going over[…]

  • Royal CBD

    […]that may be the finish of this report. Here you’ll come across some web-sites that we think you will appreciate, just click the hyperlinks over[…]

  • RoyalCBD

    […]please check out the sites we adhere to, which includes this a single, as it represents our picks through the web[…]

  • RoyalCBD

    […]just beneath, are numerous absolutely not associated web pages to ours, however, they are surely worth going over[…]

  • vaping cbd oil e liquid

    […]although internet websites we backlink to beneath are considerably not related to ours, we really feel they may be basically really worth a go via, so have a look[…]

  • Royal CBD

    […]that is the finish of this post. Here you will come across some sites that we consider you will enjoy, just click the hyperlinks over[…]

  • RoyalCBD.com

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

  • RoyalCBD

    […]very few internet sites that come about to become in depth below, from our point of view are undoubtedly nicely worth checking out[…]

  • اغاني

    […]that is the end of this write-up. Right here you’ll discover some web sites that we consider you’ll value, just click the hyperlinks over[…]

  • Escort amsterdam

    […]Wonderful story, reckoned we could combine a handful of unrelated data, nevertheless really really worth taking a look, whoa did 1 master about Mid East has got additional problerms too […]

  • Online Impacts

    […]Wonderful story, reckoned we could combine a handful of unrelated information, nevertheless actually worth taking a search, whoa did 1 understand about Mid East has got far more problerms at the same time […]

  • embedded system

    […]although internet websites we backlink to below are considerably not associated to ours, we feel they may be basically worth a go by, so have a look[…]

  • Cavapoo

    […]just beneath, are several totally not connected websites to ours, however, they are surely really worth going over[…]

  • KINGPEN

    […]just beneath, are many absolutely not connected internet sites to ours, nevertheless, they may be surely worth going over[…]

  • Dank Vapes

    […]we like to honor numerous other online websites around the internet, even when they aren’t linked to us, by linking to them. Underneath are some webpages worth checking out[…]

  • Employee Benefits Chicago

    […]Wonderful story, reckoned we could combine a few unrelated data, nonetheless truly worth taking a look, whoa did a single master about Mid East has got much more problerms also […]

  • gamer

    […]The information and facts mentioned inside the post are a few of the most effective available […]

  • traveling

    […]although sites we backlink to below are considerably not related to ours, we feel they’re actually really worth a go as a result of, so have a look[…]

  • sex questions and answers

    […]we like to honor lots of other internet sites around the internet, even if they aren’t linked to us, by linking to them. Beneath are some webpages worth checking out[…]

  • doberman puppies

    […]very couple of websites that transpire to be detailed beneath, from our point of view are undoubtedly very well really worth checking out[…]

  • health insurance broker

    […]Wonderful story, reckoned we could combine a couple of unrelated information, nevertheless actually really worth taking a look, whoa did one particular master about Mid East has got extra problerms too […]