[英]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.