PHP LaravelとVue.jsでWebSocketしてみる

秋になると「紅葉見に行こうよ」と言いたくなるけど言う相手がいない。
マエダです。

気づいたら紅葉シーズン終わっていた。。

Laravelを触ってみてVue.jsってどんなもんだろうと調査してみる機会がありました。
他のメンバーがずっと以前の社内勉強会で発表してくれていた通りものすごく便利なことに気付かされました。。。
ただ長くjQueryに甘えていたのでこの場合はどうするの？がたくさん。

今回はWebSocketしてみました。

参考サイト

https://readouble.com/laravel/5.7/ja/broadcasting.html
https://qiita.com/zaburo/items/34289d4573f39113b25a

いきなり参考サイトですがこの手順通りに対応すれば動作確認できちゃいます。
ありがとうございました。

実行コマンド抜粋

npm install –save laravel-echo socket.io-client
composer require predis/predis
composer dump-autoload
npm install -g laravel-echo-server
laravel-echo-server init
laravel-echo-server start

URLをディレクトリ指定に

Nginx設定する。
sudo vi /etc/nginx/conf.d/app.conf

location /ws/{
    proxy_pass http://127.0.0.1:6001/;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
    proxy_set_header X-Forwarded-For $remote_addr;
}

jsのpathにディレクトリを指定する。
vi resources/js/bootstrap.js

import Echo from 'laravel-echo'
window.io = require('socket.io-client');
window.Echo = new Echo({
    broadcaster: 'socket.io',
    host: window.location.hostname,
    path: '/ws/socket.io',
});

window.Echo.channel('hoges')
    .listen('Hoge', (e) => {
        console.log(e);
    });

感想

ほんとに全然JavaScriptコードを書かずともLaravelでWebSocketを利用できることにシンプルに感動でした。
個人的にはメンバーに負けないようにVue.jsを理解を深めます！
「千里の道も一歩から」
https://jp.vuejs.org/

Tweet