J'ai mis en place un événement et une nouvelle chaîne:
import Echo from "laravel-echo"
window.Pusher = require('pusher-js');
window.Echo = new Echo({
broadcaster: 'pusher',
key: process.env.MIX_PUSHER_APP_KEY,
wsHost: window.location.hostname,
wssPort: 6001,
disableStats: true,
enabledTransports: ['ws', 'wss']
et installé Echo et le configurer
mounted () {
axios.get('/tasks').then(response => (this.tasks = response.data));
Echo.channel('taskCreated').listen('TaskCreated', (e) => {
console.log(e);
this.tasks.push(task.body)
});
puis j'appelle l'événement TaskCreated lorsqu'une tâche est publiée
event(new TaskCreated($task));
Cependant, le problème est qu'Echo n'écoute pas les journaux du pousseur ou TOUT. même si dans laravel-websockets l'événement a été créé en tant que message api.
voici l'implémentation de vue js Echo:
import Echo from "laravel-echo"
window.Pusher = require('pusher-js');
window.Echo = new Echo({
broadcaster: 'pusher',
key: 'pusher-key',
cluster: 'ap2',
encrypted: true
});
dans le tableau de bord:
api-message Channel: taskCreated, Event: App\Events\TaskCreated 19:01:55
MISE À JOUR
Maintenant, quand j'ai essayé de me connecter avec WS, l'état de la connexion est en attente pendant 10 secondes, puis terminé avec une erreur WebSocket est fermé avant que la connexion ne soit établie. AND Erreur lors de l'établissement de la connexion: net :: ERR_CERT_AUTHORITY_INVALID.
URL de la requête: wss: //127.0.0.1/app/local? Protocol = 7 & client = js & version = 6.0.2 & flash = false
class TaskCreated implements shouldBroadcast
{
use Dispatchable, InteractsWithSockets, SerializesModels;
public $task;
public function __construct(Task $task)
{
$this->task = $task;
}
}
5 Réponses :
Comme Kabelbaan l'a dit, supprimez le point mais accédez à la console de débogage et actualisez simplement votre application pour commencer. Vous devriez voir la connexion et l'abonnement pour votre canal de tâches. Si vous ne le faites pas, vous pouvez commencer à déboguer la connexion plutôt que de pousser la distribution de l'événement. De plus, je suppose que le copier-coller est tout simplement incomplet, mais votre déclaration window.Echo est incomplète.
J'ai supprimé le point et toujours la même chose. redémarré tous les serveurs (y compris Apache) et toujours la même chose. window.Echo est terminé! il manque quelque chose?
@ leo0019 Essayez d'utiliser la fonction event(new TaskCreated($task)) car c'est ainsi que tous les événements sont déclenchés dans la documentation officielle de Laravel ou en utilisant Event::fire(...) . Pourriez-vous également nous montrer le channel.php?
event et la broadcast n'ont pas fonctionné pour moi. channel.php n'a qu'un seul itinéraire qui n'est pas lié aux tâches car c'est un canal public
laravel-websocket obtient déjà Channel: tasks, Event: App\Events\TaskCreated mais Echo n'écoute pas
@ leo0019 Je vois que le nom de votre canal est 'tasks' alors assurez-vous de changer le canal correctement dans le front-end également. Echo.channel('tasks').listen(...)
c'était une faute de frappe Je l'ai changé en tâches mais quand même, la console n'a pas d'erreur et le tableau de bord fait revivre les événements.
pour n'importe qui là-bas, après de nombreuses tentatives, voici ce que j'ai trouvé ... vous DEVEZ avoir des informations d'identification de pousseur définies dans votre env. et broadcast.js. J'ai beaucoup essayé avec Laravel 7 de le configurer sans les informations d'identification (pas de chance), sinon de nombreux problèmes de Google Chrome et les demandes réseau vont exploser. c'est pour moi et j'espère que cela fonctionnera pour vous
Ce serait si bien si vous pouviez nous donner une idée de ce que vous vouliez dire. J'ai essayé d'exécuter mon Laravel 7 - Application Vue sur un serveur en direct même si cela fonctionne sur localhost.
Je n'ai pas encore testé sur un serveur live
Pas la meilleure réponse formatée .. .. mais a certainement résolu ce problème exact pour moi. J'ai supprimé les constantes process.env.MIX_PUSHER_APP_KEY et process.env.MIX_PUSHER_APP_CLUSTER de bootstrap.js et les ai remplacées par les valeurs réelles. Cela fonctionne maintenant. Merci AlmoDev.
Pour le commentateur ci-dessus, cela peut être dû au fait que vous devez préfixer VUE_APP.Utilisez donc VUE_APP_MIX_PUSHER_APP_KEY cli.vuejs.org/guide/mode-and-env.html#environment-variables
Je ne vois pas la méthode broadcastOn dans l'événement TaskCreated si vous l'avez dans votre code, utilisez simplement la méthode broadcastAs comme ceci:
Echo.channel('taskCreated').listen('.task.created', (e) => {
this.tasks.push(task.body)
});
et en vue, le composant écoute un événement comme celui-ci:
public function broadcastAs()
{
return 'task.created';
}
plus d'informations: https://laravel.com/docs/broadcasting mais à propos de laravel-websockets, je l'utilise récemment et j'ai un problème similaire et vérifiez que leur dépôt github s'est avéré qu'ils avaient des problèmes ouverts pour cette erreur qu'ils n'ont pas résolus. J'adore les packages spatie mais pour celui-ci, tlaverdure / laravel-echo-server est mon premier choix et il est plus facile de travailler avec.
net :: ERR_CERT_AUTHORITY_INVALID.
URL de la requête: wss: //127.0.0.1/app/local? Protocol = 7 & client = js & version = 6.0.2 & flash = false
Vous avez peut-être un problème avec votre certification SSL . Vous utilisez wss qui se connecte uniquement sur https . Vous devriez vérifier votre certificat SSL ou utiliser ws à la place.
Astuce plus:
J'utiliserais le combo socket.io + redis au lieu de poussoir.
Peut-être que vous pouvez essayer:
Dans votre événement TaskCreated :
Echo.channel('task.created').listen('TaskCreated', (e) => {
this.tasks.push(task.body)
});
et dans votre Vue:
public function broadcastOn()
{
return new Channel('task.created');
}
Pourriez-vous vérifier la console? il peut y avoir des erreurs.
Supprimez le point avant
TaskCreated. Le point indique que vous avez un événement nommé personnalisé. Vous pouvez ajouter un nom personnalisé en ajoutant une fonctionbroadcastAs()dans la classe d'événements et en renvoyant une chaîne avec le nom d'événement personnalisé.@UzairRiaz pas d'erreurs ou de journaux dans la console. Réseau - Le statut WS est 101
DevTools failed to load SourceMap: Could not load content for http://127.0.0.1:8000/js/utf8.js.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE DevTools failed to load SourceMap: Could not load content for chrome-extension://ndjpnladcallmjemlbaebfadecfhkepb/editor/config.js.map: HTTP error: status code 404, net::ERR_UNKNOWN_URL_SCHEME DevTools failed to load SourceMap: Could not load content for chrome-extension://ndjpnladcallmjemlbaebfadecfhkepb/editor/content.js.map: HTTP error: status code 404, net::ERR_UNKNOWN_URL_SCHEMEpouvez-vous confirmer si les événements se déclenchent depuis le backend? consultez le tableau de bord laravel-websockets sur {base_ur} / laravel-websockets . De plus, laravel echo continue d'envoyer des requêtes à wss: {url} et ws: {ur} , et si vous n'exécutez pas
php artisan websockets:serve, cela produira des erreurs dans la console, alors vérifiez ces erreurs et postez-les ici. Vous pouvez également vérifier le réseau dans les outils de développement de navigateur en définissant le filtre sur toutes les demandes pour vérifier ces demandes.Le tableau de bord laravel-websockets reçoit des messages et le serveur WebSocket est en cours d'exécution et affiche l'ID de connexion et envoie des journaux de messages: (Cela fait deux jours que j'ai essayé de créer de nouveaux projets mais agissent tous de la même manière ....
pourriez-vous me contacter à join.slack.com/t/vue-vmr4432/shared_invite/… . Je peux vous aider si j'apprends à connaître le problème en détail. Je ne peux pas continuer à vous demander d'essayer des choses ici dans les commentaires.
viens de vérifier plz