[英]Laravel echo with socket.io
我想在 javascript 端監聽服務器端事件。 我為此找到了這個包:
https://github.com/tlaverdure/laravel-echo-server
如果這么多次,我已經閱讀了所有內容:
https://laravel.com/docs/5.3/events
https://laravel.com/docs/5.3/broadcasting
https://laravel.com/docs/5.3/notifications
到目前為止,我已經這樣做了:
控制器動作:
broadcast(new NewVote());
event(new NewVote()); // Also tried this
“NewVote”事件類:
public function broadcastOn()
{
return new Channel('new-vote');
}
Javascript:
import Echo from "laravel-echo"
window.Echo = new Echo({
broadcaster: 'socket.io',
host: 'http://assessment.local:6001'
});
window.Echo.channel('new-vote')
.listen('NewVote', (e) => {
console.log(e);
});
laravel-echo-server.json
{
"appKey": "0p4o9t942ct15boc4nr8tjb178q29fdmlcat8c1p1s51i2pbq9nmtjud94t4",
"authHost": null,
"authEndpoint": "/broadcasting/auth",
"database": "redis",
"databaseConfig": {
"redis": {},
"sqlite": {
"databasePath": "/database/laravel-echo-server.sqlite"
}
},
"devMode": true,
"host": "assessment.local",
"port": "6001",
"referrers": [],
"socketio": {},
"sslCertPath": "",
"sslKeyPath": ""
}
此命令已在運行:
laravel-echo-server start
php artisan queue:work
php artisan queue:listen
gulp watch
當我觸發事件時,我期待控制台按摩。 但我沒有在控制台上得到任何東西。
讓我知道是否需要任何其他信息。
注意:我的 socket.io 服務器運行成功,沒有任何錯誤。
謝謝,
帕思·沃拉
配置Echo花了我一些時間,但我發現客戶端配置包含一個令人困惑的默認事件命名空間。
嘗試按如下方式配置Echo客戶端庫:
import Echo from "laravel-echo"
window.Echo = new Echo({
namespace: 'Base.Event.Namespace', //defaults to App.Event
broadcaster: 'socket.io',
host: 'http://assessment.local:6001'
});
因此,在觸發類似event(new \\Hello\\World\\NewVote())
,請確保Echo配置了命名空間Hello.World
干杯!
不知道是什么問題。 但最后,我讓它發揮作用。
我還創建了一個小型演示,演示了使用laravel-echo-server( https://github.com/tlaverdure/laravel-echo-server )對socket.io使用Laravel echo。
https://github.com/xparthxvorax/Larevel-echo-with-socket.io
可以幫助別人。
Your blade file looks like this.
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Chat app</title>
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap" rel="stylesheet">
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<style>
.chat-row {
margin: 50px;
}
ul {
margin: 0;
padding: 0;
list-style: none;
border-radius: 5px;
}
ul li {
padding:4px;
background-color: #9fe3e6;
margin-top: 2vh;
border-radius: 5px;
}
.type-message {
position: fixed;
width: 70vw;
bottom: 0;
margin-bottom: 4vh;
}
</style>
</head>
<body>
<div class="container">
<div class="row chat-row">
<div class="chat-content">
<ul>
</ul>
</div>
<div class="type-message">
<form onsubmit="return false" action="#">
<div class="form-group d-flex">
<input type="hidden" name="" id="name" value="{{ Auth::user()->name ?? 'Anonymous'}}">
<input type="text" name="" id="message" class="form-control" placeholder="Type message...">
<button class="btn btn-primary mx-2" id="sentmessage">Send</button>
</div>
</form>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
<script src="https://cdn.socket.io/4.0.1/socket.io.min.js" integrity="sha384-LzhRnpGmQP+lOvWruF/lgkcqD+WDVt9fU3H4BWmwP5u5LTmkUGafMcpZKNObVMLU" crossorigin="anonymous"></script>
<script>
$(function() {
let ip_address = '127.0.0.1';
let socket_port = '3000';
let socket = io(ip_address + ':' + socket_port);
$('#sentmessage').on('click',function(){
let message_value = $('#message').val();
let message = $('#name').val() + ' : ' + $('#message').val();
let name = $('#name').val();
if($.trim(message_value) != '')
{
socket.emit('sendChatToServer', message);
$('.chat-content ul').append('<li>Me : '+ message_value +'</li>');
$('#message').val('');
}
})
socket.on('sendChatToClient', (message) => {
$('.chat-content ul').append(`<li>${message}</li>`);
});
});
</script>
</body>
</html>
Now create a file named server.js in root directory i.e. your_project/server.js and put this code
const express = require('express');
const app = express();
const server = require('http').createServer(app);
const io = require('socket.io')(server, {
cors: { origin: "*"}
});
io.on('connection', (socket) => {
console.log('connection');
socket.on('sendChatToServer', (message) => {
socket.broadcast.emit('sendChatToClient', message);
});
socket.on('disconnect', (socket) => {
console.log('Disconnect');
});
});
server.listen(3000, () => {
console.log('Server is running');
});
現在通過終端運行你的節點服務器
節點服務器.js
現在提供你的 laravel 文件
php工匠服務
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.