monteecristoo’s blog

https://twitter.com/irakaarozo

cloud9上のLaravelアプリケーション内のnode server(今回はredis)とsocket.ioでLaravelアプリケーション内のVueJSからwebsocket通信をするとき

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:8890')); とする。

ここで 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から外さなきゃダメ???

---------------------------------------------------------------------------------------------------------

親ページが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になりはじかれる。

-----------------------------------------------------------------------------------------------------

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');
});