zahedkamal87's avatar

Socket.io not working with Event

Hi, look at the below codes -

//socket.js
var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);
var Redis = require('ioredis');
var redis = new Redis();
redis.subscribe('redirect-to', function(err, count) {
});
redis.on('message', function(channel, message) {
    console.log('Message Recieved: ' + message);
    message = JSON.parse(message);
    io.emit(channel + ':' + message.event, message.data);
});
http.listen(function(){
    console.log('Listening on Port');
});

In a view file i've the blow codes

@extends('layouts.admin_tpl')

@section('content')
    <h3>
        Redirect To
    </h3>
    <hr/>

    <div class="row">
        <div class="col-12" id="power">
            
        </div>
    </div>


    <script src="{{ asset('js/socket.io.min.js') }}"></script>
    <script>
        var url = window.location.hostname+ ':3000';
        var socket = io('{{url("/")}}');
        var socket = io('{{route("admin_redirectto")}}');

        socket.on("redirect-to:App\\Events\\RedirectTo", function(message){
            $('#power').text(message.data.url);
            console.log('inside the socket');
        });
    </script>
@endsection

RedirectTo event's code -

<?php

namespace App\Events;

use Illuminate\Broadcasting\Channel;
use Illuminate\Queue\SerializesModels;
use Illuminate\Broadcasting\PrivateChannel;
use Illuminate\Broadcasting\PresenceChannel;
use Illuminate\Foundation\Events\Dispatchable;
use Illuminate\Broadcasting\InteractsWithSockets;
use Illuminate\Contracts\Broadcasting\ShouldBroadcast;

class RedirectTo
{
    use Dispatchable, InteractsWithSockets, SerializesModels;

    public $data;

    public function __construct()
    {
        $this->data = [
        'addition' => '10'
        ];
    }

    public function broadcastOn()
    {
        // return new PrivateChannel('redirect-to');
        return ['redirect-to'];
    }
}

Route

Route::get('admin/redirectto', 'AdminController@redirectTo_get')->name('admin_redirectto');

Route's controller function -

public function redirectTo_get(Request $request)
    {
        // $data = [
        //     'event' => 'RedirectTo',
        //     'data' => [
        //         'url' => 'http://zahedkamal.com',
        //         'name' => 'Zahed Kamal'
        //     ]
        // ];
        // Redis::publish('redirect-to', json_encode($data));

        event(new RedirectTo());

        return view('admin.redirectto');
    }

I've the laravel project/app running using xampp in c:/xampp/htdocs/larapro. So, i visit the url

http://localhost:8080/larapro/public/admin/redirectto

//OR

http://localhost:8000/admin/redirectto     //using "php artisan serve" command 

I get the below error

 http://localhost:8080/socket.io/ [HTTP/1.1 404 Not Found 12ms]

//OR

 http://localhost:8000/socket.io/ [HTTP/1.1 404 Not Found 12ms]

Everytime i visit the url Note that if i disable the 'event(new RedirectTo())` and un-comment the codes above above that line. I get logs in CMD.

Please advice me how can i get it working. Or what i am doing wrong. Thank you

0 likes
10 replies
zahedkamal87's avatar

@bunnypro i'm trying to find what is wrong in my codes or what i'm doing wrong.

And i guess Using Laravel Echo also require NodeJs or a server side codes.

bunnypro's avatar

laravel echo is not requiring you to use node js. but if you don't want to use online pub/sub providers (like pusher), so you need to use nodejs as your own server.

btw, how do you run your socket.js ? it's using nodejs right ?

you can use tlaverdure/laravel-echo-server that metioned in the docs.

zahedkamal87's avatar

To be honest, i dont understand how to use Echo and its server! :(

bunnypro's avatar

you can read the documentation to understand the basic.

zahedkamal87's avatar

I dont understand the below part from the documentation, what to do with this below code or where to put it ----

Next, you will need to instantiate Echo with the socket.io connector and a host.

import Echo from "laravel-echo"

window.Echo = new Echo({
    broadcaster: 'socket.io',
    host: window.location.hostname + ':6001'
});

bunnypro's avatar

the code is available in bottom of resources/assets/js/bootstrap.js.

the next step is create your node server with laravel-echo-server package.

zahedkamal87's avatar

from documentation --

Laravel Echo is a JavaScript library that makes it painless to subscribe to channels and listen for events broadcast by Laravel. You may install Echo via the NPM package manager. In this example, we will also install the pusher-js package since we will be using the Pusher broadcaster:

so does that mean i've to use Pusher? though i cannot use pusher as i cannot use anything online

bunnypro's avatar

no, you don't have to. that's just for example.

the alternative is using redis + socket.io . it's also described in the documentation.

zahedkamal87's avatar

how do i do this ""Next, you will need to instantiate Echo with the socket.io connector and a host.""

Please or to participate in this conversation.