updated: 2018/7/9
node_server側
プロジェクト直下にmkdir node_server
npm init → entry point は server.js
npm install redis express socket.io
@/node_server/server.js
var app = require('express')();
var server = require('http').Server(app);
var io = require('socket.io')(server);
var redis = require('redis');
server.listen(8081);
io.on('connection', function(socket) {
console.log('New client connected');
});
node_serverの動作確認は...
@node_server terminalから
>>> node server.js
errorが来なければOK.
Vuejs側
npm install vue-socket.io --save
@app.js
import VueSocketio from 'vue-socket.io';
Vue.use(VueSocketio, 'cloud9のaddress:8081'));
@hoge.vue
<template>
<div>
<h1>SOckeIo</h1>
</div>
</template>
<script>
export default {
sockets: {
}
}
</script>
ここでmake:authをしているとsocket通信がmiddleware->'auth'ではじかれるのでその場合は、middleware->'auth'がかからないルーティングをweb.phpに作って...
Vue.use(VueSocketio, 'cloud9のaddress/test:8081')); とする。
ここで Corsエラー
XMLHttpRequest cannot load /socket.io/?EIO=3&transport=polling&t=LliUlhx. Redirect from 'socket.io/?EIO=3&transport=polling&t=LliUlhx' to '/socket.io?EIO=3&transport=polling&t=LliUlhx' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin '' is therefore not allowed access.
ドメインのトップはauthから外さなきゃダメ？？？
Corsエラーと同時にnode_server側でも以下のエラーメッセージ
events.js:137
throw er; // Unhandled 'error' event
^
Error: Redis connection to localhost:6379 failed - connect ECONNREFUSED 127.0.0.1:6379
コネクト拒否エラーが出た場合、redisサーバーが動いていない、もしくは正しくインストールできていないので
ターミナルでredis-serverを起動するか確認
コースエラー →→ redisサーバーが動いていない
ソケット通信が発信されているがエラー →→ ポートやアドレスの設定が間違っている
---------------------------------------------------------------------------------------------------------
親ページがhttpsだとsocketはMixed ContentでVueで実装したcomponentが全てブロックされる。SSL/TLS通信に対応さえる必要がある。
→ トップページにmiddleware->('auth')をかませるとVueのコンテンツがhttpsで読み込まれる。
locslhost上のlaravelならそのままwebsocket通信でMix Contentsに引っかからない？？？
bladeTemplate内でのscriptの読み込みは...
{{ secure_asset('path') }} ですること。{{ asset('path') }} だとhttpになりはじかれる。
-----------------------------------------------------------------------------------------------------
CORS対策
middlewareを作る
php artisan make:middleware Cors
edit Cors middleware
@\app\Http\Middleware\Cors.php
public function handle($request, Closure $next)
{
return $next($request)
->header('Access-Control-Allow-Origin', '*') // set allowed domein
->header('Access-Control-Allow-Methods', 'GET, POST, PUT, PATCH, DELETE, OPTIONS')
->header('Access-Control-Allow-Headers', 'Content-Type, Authorization');
}
register Cors middleware
@\App\Http\Kernel
protected $middleware = [
\App\Http\Middleware\Cors::class
]
---mindSpace 4_CORS Laravel + Angular 2 Vue.js 2
マニュアルで作ってもよいけど laravel-corsというpackageもある。
github.com
------------------------------------------------------------------------------
server.jsでnode_serverのcloud9接続portを指定するときの注意
port番号は8081,8082にすること。これらがデフォルトで解放されているポート(8080はメインアプリ用)
参考：
https://socket.io/get-started/chat/docs.c9.io
https://socket.io/get-started/chat/
server.jsの動作確認用
server.listen(8081, function(){
console.log('Listening on Port 8081');
});
app.get('/', function(req, res){
res.send('<h1>Hello world</h1>');
});
→ ドメイン:8081でHello worldが表示される
io.on('connection', function(socket) {
console.log('New client connected');
});
-------------------------------------------------------------------Amitav 25#9Vue2&Laravel5.3
stackoverflow.com
