Pusher authentication not working as expected

Question

I have made a project with Laravel and react. There is a react component defined for video chat. Video is working but I am having issues with presence_auth(), basically getting the error with response 500 ()

Call to undefined method Pusher\Pusher::presence_auth()

Following is my web routes file:

<?php

/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/

Route::get('/', function () {
    return view('welcome');
});

Auth::routes();

Route::get('/home', 'HomeController@index')->name('home');

Route::post('/pusher/auth', 'HomeController@authenticate');

The HomeController where I am getting this error:

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use \Pusher\Pusher;

class HomeController extends Controller
{
    /**
     * Create a new controller instance.
     *
     * @return void
     */
    public function __construct()
    {
        $this->middleware('auth');
    }

    /**
     * Show the application dashboard.
     *
     * @return \Illuminate\Http\Response
     */
    public function index()
    {
        return view('home');
    }

    public function authenticate(Request $request){
        $socketId = $request->socket_id;
        $channelName = $request->channel_name;

        $pusher = new Pusher('7525d88e2baa6d08b175', 'c25081ca96b9033e941c', '523589', [
            'cluster' => 'ap1',
            'encrypted' => true
        ]);

        $presence_data = ['name' => auth()->user()->name];
        $key = $pusher->presence_auth($channelName, $socketId, auth()->id(), $presence_data);

        return response($key);
    }
}

And finally my App.js file with the components:

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import MediaHandler from '../MediaHandler';
import Pusher from 'pusher-js';
import Peer from 'simple-peer';

const APP_KEY = '7525d88e2baa6d08b175';

export default class App extends Component {
    constructor(){
        super();


        this.state = {
            hasMedia: false,
            otherUserId: null
        };

        this.user = window.user;
        this.user.stream = null;
        this.peers = {};

        this.mediaHandler = new MediaHandler();
        this.setupPusher();

        this.callTo = this.callTo.bind(this);
        this.setupPusher = this.setupPusher.bind(this);
        this.startPeer = this.startPeer.bind(this);
    }

    componentWillMount(){
        this.mediaHandler.getPermissions()
        .then((stream) => {
            this.setState({hasMedia: true});
            this.user.stream = stream;

            try{
                this.myVideo.srcObject = stream;
            } catch(e) {
                this.myVideo.src = URL.createObjectURL(stream);
            }
            this.myVideo.play();
        })
    }

    setupPusher(){
        this.pusher = new Pusher(APP_KEY, {
            authEndpoint: '/pusher/auth',
            cluster: 'ap1',
            auth: {
                params: this.user.id,
                headers: {
                    'X-CSRF-Token': window.csrfToken
                }
            }
        });

        this.channel = this.pusher.subscribe('presence-video-channel');

        this.channel.bind(`client-signal-${this.user.id}`, (signal) => {
            let peer = this.peers[signal.userId];

            if(peer == undefined){
                this.setState({otherUserId: signal.userId});
                peer = this.startPeer(signal.userId, false);
            }
            peer.signal(signal.data);
        });
    }

    startPeer(userId, initiator = true){
        const peer = new Peer({
            initiator,
            stream: this.user.stream,
            trickle: false
        });

        peer.on('signal', (data) => {
            this.channel.trigger(`client-signal-${userId}`, {
                type: 'signal',
                userId: this.user.id,
                data: data
            });
        });

        peer.on('stream', (stream) => {
            try{
                this.userVideo.srcObject = stream;
            } catch(e) {
                this.userVideo.src = URL.createObjectURL(stream);
            }
            this.userVideo.play();
        });

        peer.on('close', () => {
            let peer = this.peers[userId];
            if(peer != undefined){
                peer.destroy();
            }
            this.peers[userId] = undefined;
        });

        return peer;
    }

    callTo(userId){
        this.peers[userId] = this.startPeer(userId);
    }


    render() {
        return (
            <div className="App">
            {[1,2,3,4].map((userId) => {
                return this.user.id != userId ? <button key={userId} onClick={() => this.callTo(userId)}>Call {userId}</button> : null
            })}
                <div className="video-container">
                    <video className="my-video" ref={(ref) => {this.myVideo = ref;}}></video>
                    <video className="user-video" ref={(ref) => {this.userVideo = ref;}}></video>
                </div>
            </div>
        );
    }
}

if (document.getElementById('app')) {
    ReactDOM.render(<App />, document.getElementById('app'));
}

Everything else is working fine interms of stream but for some reason, presence_auth() function is not being identified.

Answer 1

So I had the same issue and i was able to solve it. my pusher php client was pusher/pusher-php-server "~3.0". The presence_auth() method is not available in this version of the library. I had to use the latest library which is version 5 and it worked seemlessly without any further modification. I just update the to the latest version.