angularjs Angular 7和Laravel-Echo

z6psavjg  于 2024-01-05  发布在  Angular
关注(0)|答案(1)|浏览(200)

所以我试着让后端的laravel和前端的Angular工作。Laravel版本5.8和Angular 7.2我有我的事件

  1. public function broadcastOn()
  2. {
  3. return new Channel('test');
  4. }
  5. public function broadcastAs() {
  6. return 'message.sent';
  7. }

字符串
我做了一个路线,

  1. Route::get('/fire', function () {
  2. event(new \App\Events\Messages\MessageEvent());
  3. return 'ok';
  4. });


在redis和laravel-echo-server中,

  1. "PUBLISH" "test" "{\"event\":\"message.sent\",\"data\":{\"a\":\"a\",\"socket\":null},\"socket\":null}"
  1. Channel: test
  2. Event: message.sent

的字符串
但是每当我试图从Angular 连接到套接字的时候,有些东西失败了,它既不连接也不抛出错误。套接字的响应形式是200,它每25秒获得200(回声服务器配置),但ws连接没有建立,也没有捕获任何事件
Angular 的侧

  1. import {Component, Injectable, OnInit} from '@angular/core';
  2. import Echo from 'laravel-echo';
  3. @Component({
  4. moduleId: module.id.toString(),
  5. templateUrl: 'index.html',
  6. })
  7. @Injectable()
  8. export class MessagesPagesViewComponent {
  9. echo: any;
  10. constructor() {
  11. const SocketIoClient = require('socket.io-client');
  12. try {
  13. this.echo = new Echo({
  14. broadcaster: 'socket.io',
  15. host: 'localhost:6001',
  16. client: SocketIoClient,
  17. });
  18. } catch (e) {
  19. console.log(e);
  20. }
  21. this.echo.connector.socket.on('connect', () => {
  22. console.log('CONNECTED');
  23. });
  24. this.echo.connector.socket.on('reconnecting', () => {
  25. console.log('CONNECTING');
  26. });
  27. this.echo.connector.socket.on('disconnect', () => {
  28. console.log('DISCONNECTED');
  29. });
  30. this.echo.connector.socket.on('test.message.sent', (data) => {
  31. console.log('1', data);
  32. });
  33. this.echo.connector.socket.on('.message.sent', (data) => {
  34. console.log('2', data);
  35. });
  36. this.echo.connector.socket.on('message.sent', (data) => {
  37. console.log('3', data);
  38. });
  39. this.echo.join('test').joining((data) => {
  40. console.log('joining', data);
  41. }).leaving((data) => {
  42. console.log('leaving', data);
  43. });
  44. this.echo.join('test2').joining((data) => {
  45. console.log('joining', data);
  46. }).leaving((data) => {
  47. console.log('leaving', data);
  48. });
  49. this.echo.channel('test').listen('.message.sent', (data) => {
  50. console.log('From laravel echo: ', data);
  51. });
  52. this.echo.channel('test2').listen('.message.sent', (data) => {
  53. console.log('From laravel echo: ', data);
  54. });
  55. console.log(this.echo);
  56. }
  57. }


laravel-echo-server.json

  1. {
  2. "authHost": "http://localhost",
  3. "authEndpoint": "/broadcasting/auth",
  4. "clients": [],
  5. "database": "redis",
  6. "databaseConfig": {
  7. "redis": {
  8. "host": "172.24.0.2",
  9. "port": "6379"
  10. },
  11. "sqlite": {
  12. "databasePath": "/database/laravel-echo-server.sqlite"
  13. }
  14. },
  15. "devMode": true,
  16. "host": null,
  17. "port": "6001",
  18. "protocol": "http",
  19. "socketio": {},
  20. "secureOptions": 67108864,
  21. "sslCertPath": "",
  22. "sslKeyPath": "",
  23. "sslCertChainPath": "",
  24. "sslPassphrase": "",
  25. "subscribers": {
  26. "http": true,
  27. "redis": true
  28. },
  29. "apiOriginAllow": {
  30. "allowCors": true,
  31. "allowOrigin": "*",
  32. "allowMethods": "GET, POST",
  33. "allowHeaders": "Origin, Content-Type, X-Auth-Token, X-Requested-With, Accept, Authorization, X-CSRF-TOKEN, X-Socket-Id"
  34. }
  35. }

nmpmafwu

nmpmafwu1#

我也遇到过同样的问题,但我解决了。
目前Laravel Echo无法与socket.io-client v.4.7建立WebSocket连接。但它可以与socket.io-client版本**^2.5.0**正常工作
package.json

  1. {
  2. "dependencies": {
  3. "laravel-echo": "^1.15.3", // latest version as of 29th Nov, 2023
  4. "socket.io-client": "^2.5.0",
  5. },
  6. "devDependencies": {
  7. "@types/socket.io-client": "^3.0.0",
  8. }
  9. }

字符串
x1c 0d1x的数据
notification.service.ts

  1. // notification.service.ts
  2. import { Injectable } from '@angular/core';
  3. import Echo from 'laravel-echo';
  4. // import { io } from 'socket.io-client';
  5. @Injectable({
  6. providedIn: 'root',
  7. })
  8. export class NotificationService {
  9. private echo!: Echo;
  10. constructor() {
  11. this.initEcho();
  12. }
  13. private initEcho() {
  14. const io = require('socket.io-client');
  15. this.echo = new Echo({
  16. broadcaster: 'socket.io',
  17. client: io,
  18. host: 'http://localhost:6001', // Change this to your Laravel Echo server host
  19. });
  20. this.echo.connector.socket.on('connect', () => {
  21. console.log('%c Connected to WebSocket', 'background: blue; color: white');
  22. });
  23. this.echo.connector.socket.on('reconnecting', () => {
  24. console.log('%c ReConnecting to WebSocket', 'background: yellow; color: green');
  25. });
  26. this.echo.connector.socket.on('disconnect', () => {
  27. console.log('%c Disconnected from WebSocket', 'background: red; color: white');
  28. });
  29. this.echo.channel('user-channel').listen('.UserEvent', (data: any) => {
  30. // Handle the real-time notification data here
  31. console.log('Notification received:', data);
  32. });
  33. }
  34. }


test-notification.component.ts

  1. import { Component, OnInit } from '@angular/core';
  2. import { NotificationService } from './notification.service';
  3. @Component({
  4. selector: 'app-test-notification',
  5. templateUrl: './test-notification.component.html',
  6. styleUrls: ['./test-notification.component.scss']
  7. })
  8. export class TestNotificationComponent implements OnInit {
  9. constructor(protected notificationService: NotificationService) { }
  10. ngOnInit(): void {
  11. }
  12. }

展开查看全部

相关问题