I'm using the Vue + Laravel pusher in my Realtime app.
I realized that client sends "pusher:ping" event to backend and it responds with "pusher:pong" based on Doc.
I was wondering how can I detect if the socket connection is alive?
Is there a way to subscribe or listen to the protocol level events?
Thanks
I have an API that continuously sends data to a webhook in my express server. The route in my server looks something like this:
app.post("/webhook", (req, res) => {
console.log(req.body);
res.status(200).end();
});
How do I send data to my frontend as they're coming in? Is it possible to place a websocket between my frontend and backend? If so, can anyone please point to a tutorial? Much appreciated, thanks.
I would recommend to use socket.io to enable a bidirectional comunication between your frontend and backend.
Each time the third party API sends data throught your webhook, you could trigger a socket event and receive a realtime update in your front end.
check: https://socket.io
It's simple and have a good documentation.
I have a Laravel-echo-server with Redis running on my local.
I created a test API endpoint, that emits broadcastable event.
on http://localhost:8000/api/web-socket-test I see the response in echo server CLI.
I set-up laravel-echo auth key and I can get the stat info from server API
http://localhost:6001/apps/APP_ID/status?auth_key=b73a61d0.
The problem is with connecting to echo-server from Angular via ws: protocol.
My connection code is
import {webSocket, WebSocketSubject} from 'rxjs/webSocket';
export class MyComponent implements OnInit, OnDestroy {
myWebSocket: WebSocketSubject<any> = webSocket('ws://127.0.0.1:6001');
ngOnInit() {
this.myWebSocket.subscribe(
msg => console.log('message received: ' + msg),
err => console.log(err),
() => console.log('complete')
);
}
And finally I've got an error: WebSocket connection to 'ws://127.0.0.1:6001/' failed: Connection closed before receiving a handshake response.
How can I establish ws connection?
I believe you want to try connecting using the socket.io client libraries instead of using rxjs raw websockets.
Although it's not immediately clear from the laravel echo server docs, the project title states it's a 'Socket.io server for Laravel Echo'. So I'm assuming you should use the socket.io client libraries for connections.
I'm following the Laravel Documentation to set up broadcasting using Pusher, and it looks pretty straight-forward, but I haven't gotten it work yet, so I must have made a mistake somewhere along the way.
Here's what I've done:
Server Side
I've created an Event that implements the ShouldBroadcastNow interface and defined the broadcastsOn() method.
class ThreadMessageCreated implements ShouldBroadcastNow {
use Dispatchable, InteractsWithSockets, SerializesModels;
public function broadcastOn() {
return new Channel('bobtest');
}
I'm raising the Event from one of my API Controllers:
public function createMessage(Thread $thread, Request $request) {
...
event(new ThreadMessageCreated($message, $thread));
return $message;
}
I've configured my pusher credentials in my .env file.
Client Side
I've configured Laravel Echo on the Client side (via the angular-laravel-echo package) and subscribed my client to the channel.
ngOnInit() {
this.echo
.join('bobtest', 'public')
.listen('bobtest', 'ThreadMessageCreated')
.subscribe(()=>alert('message received'));
console.log(this.echo);
}
However, when my API endpoint is hit, the event is fired, but I don't see anything on the client side.
So, I added logging in the broadcastOn() method to verify it's getting called. Then I changed the driver from pusher to log and I do see the Broadcast info getting written to the laravel.log file.
So, I'm assuming that the broadcast is also happening when using the Pusher driver, and either isn't being sent out from Laravel, or isn't being received by the Client.
I'm new to sockets, pusher, & Laravel Echo, so I'm not sure where to look for more info to track this down.
I don't see any errors in the laravel.log file.
I don't see any errors in Chrome Dev Tools on the client side.
I logged into pusher and there are no errors in the 'Error Logs' tab
What can I do to get more details to figure out where the problem is occurring?
Thanks! :-)
[UPDATE]
I can see the broadcasts are appearing in my pusher account, so the problem seems to be on the client side. Perhaps I'm not subscribing correctly to the right channel?
Also, I'm using Laravel as the back end only, using JWT Authentication. I'm currently not using the laravel csrf token, not sure if that could pertinent or not.
I now learned I can see web socket data in Dev Tools. I'm assuming this error was there before, I just didn't notice it. I guess the 101 status code didn't stand out to me :-o
But after looking in Dev Tools, I could clearly see this error:
{
message: "App key xxx not in this cluster. Did you forget to specify the cluster?",
event: "pusher:error"
}
To view Web Socket activity:
Dev Tools > Network > Filter > WS (Web Sockets):
In my case, I simply needed to specify the cluster in the Laravel Echo config:
window.Echo = new Echo({
broadcaster: 'pusher',
key: 'xxxxxxxxxxxxxxxxxxxx',
cluster: 'us2', <--------------[pusher needs a cluster :-)]
host: 'http://the-host.com',
auth: {
headers: {
'Authorization': 'Bearer ' + token
}
}
});
I have a cordova app running on angular that uses a sails server as its API endpoint. It is set up to use CORS and everything is working with ajax calls.
I am attempting to connect to the sails server using socket.io. I copied the sails.io.s file from the sails server's assets folder to the cordova app. I modified it so that it connects to 127.0.0.1:1337 and does so successfully. It does not use cookies on the front end and the sails end does not use socket authorization (set in config/sockets.js).
When I call:
io.socket.get('/controller/action', function callback(return){
});
The return object looks something like this:
{
message: "TypeError: Object #<Object> has no method 'get'",
status: 500
}
The sails server log doesn't show that it is hitting /controller/action. Does anyone have any experience with using the custom sails io library on a JS client that isn't sails?