Error callback using echo-laravel and react - javascript

I'm trying to add a callback for a pusher:subscription_error with echo-laravel. The client is done in react. The broadcaster is Pusher and I subscribe to a channel like this:
echo.private('User.' + this.props.user.id).listen("NewMessage", (newMessage) => {
if (newMessage.message.message_room_id === this.state.selectedMessage.id) {
this.props.newMessageInOpenBox(newMessage);
} else {
this.props.newMessage(newMessage);
}
}
)
Im trying to get the failed subscription callback working so i can trigger a token refresh. How would i catch the subscription error? i couldn't find anything in the docs or elsewhere.

for anyone having the same problem i found that you have to go into the channel like this
echo.connector.pusher.channels.channels['private-' + channelName].bind('pusher:subscription_error', () => {
alert('sub error')
})

Related

Strophe.js on-message handler doesn't trigger

The Strophe onMessage handler that I added to the connection doesn't seem to trigger whenever a message gets send. I can't seem to find the problem. I can't find a lot of other info either and the info I do find seems to suggest my code is correct. I can send messages, so I know the connection works, but I cannot receive messages.
I create the connection like this, and then call the login function if a new connection is made:
XMPPChatConnection() {
if (this.#connection === undefined) {
this.#connection = new XMPPHelper.Strophe.Connection(
"wss://xxxxxxxxxxxxxxxxxxxxxxx",
{protocol: "wss"}
);
this.login();
}
return this.#connection;
}
The login function calls the chatListeners function which should setup all the listeners that are required when the user is logged in:
login() {
let jid = this.composeJabberIdentifier();
let token = this.getXMPPToken();
this.#connection.connect(jid, token, (status) => {
if (status === XMPPHelper.Strophe.Status.CONNECTED) {
this.chatListeners();
}
});
}
The messageListener is an imported function and currently only contains a console log:
import messageListener from "../classes/listeners/xmpp/chat/messageListener";
chatListeners() {
this.XMPPChatConnection().addHandler(messageListener, null, 'message', 'chat');
}
messageListener:
export default function messageListener(message) {
console.log(message);
}
What did I do wrong?
So I found the cause of my problems. I was using the Xabber client to send messages back, but it turned out Xabber sent the messages to the wrong resource.
On top of that I should have set my presence after login with a priority of >= 0.
this.XMPPChatConnection().send($pres().c("priority").t("0"));

How to get wix chat channel Id when user enterto my website

I want to get channel Id so I used corvid documentation and follow instructions
First I added wix chat app
then I added the following function :
export async function wixGetChannelId() {
let channel = await $w("#myChatbox").getChannel({type: "Business"});
console.log("channel id",channelId) }
and call wixGetChannelId function from onReady
But I got undefied, what I need to change?
So I tried the below code to loop for the channel id.
$w.onReady(function () {
setInterval( () => {
getId();
}, 1500);
});
function getId() {
$w("#wixChat1").getChannel({type: "Business"})
.then((channel) => {
console.log(channel);
})
.catch((err) => {
console.log(err);
});
}
Basically, I get error the first few times (you are receiving the undefined because you dont catch the error) but as soon as I click on the chatbox icon (which I think triggers the creation of the channel) I start getting the channel information.
So I think the user needs to first initiate a conversation which triggers a new channel creation.

Internet Connection Listener

I have an application which scans 2D barcodes then retrieves data from the URLs provided by the codes. In the event that the user loses connection to the internet, the application begins to store the URLs via AsyncStorage. The issue is, I need to implement a listener that upon regaining an internet connection, the application begins a given method. Are there any recommended ways to go about implementing a connection listener such as this?
Edit:
I have tried using a NetInfo EventListener however I am not sure if I'm using it incorrectly, as it always calls the passed function, even when the internet status hasn't changed.
_connectionHandler = (e) => {
this.setState({ cameraActive: false })
NetInfo.getConnectionInfo().then((connectionInfo) => {
if (connectionInfo.type === "none"){
console.log("No internet")
dataArray.push(e.data)
let barcodeData_delta = {
data: dataArray
}
AsyncStorage.mergeItem(STORAGE_KEY, JSON.stringify(barcodeData_delta));
NetInfo.isConnected.addEventListener(
'connectionChange',
this._handleConnectionChange(e.data)
);
this.setState({ cameraActive: true })
} else {
console.log("Internet available -> Going to read barcode now")
this._handleBarCodeRead(e.data);
}
})
}
React Native has a NetInfo documentation, there you can see how to add a listener his connection changes, and do what you want when its called.
Add a Handler to isConnected property
NetInfo.isConnected.addEventListener(
'connectionChange',
_connectionHandler
);
A function that handles the change, just adjust your setState with the camera, I couldn't figure out when to call it.
_connectionHandler = (isConnected) => {
this.setState({ cameraActive: false })
if (!isConnected){
console.log("No internet")
dataArray.push(e.data)
let barcodeData_delta = {
data: dataArray
}
AsyncStorage.mergeItem(STORAGE_KEY, JSON.stringify(barcodeData_delta));
this.setState({ cameraActive: true })
} else {
console.log("Internet available -> Going to read barcode now")
this._handleBarCodeRead(e.data);
}
})
}

Angular 2 callback

I created a service that gets the some data from the api this is the code
getChallenges(): Observable<IChallenge[]> {
if (this._challengeUrl != null) {
return this.http.get(this._challengeUrl)
.map((res:Response) => <IChallenge[]>res.json())
.do(data => console.log('data: ' + JSON.stringify(data)))
.catch(this.handleError);
} else {
//;
}
}
and i subscribe inside the component where i want to use the service inside ngOnInit and everything is running my fine.
this._challengeService.getChallenges()
.subscribe(challenges => this.challenges = challenges,
error => this.errorMessage = <any>error);
but now i need to use a filter on the data which should run after ngInit finishes getting the data. this is the filter:
filterByLvl(lvl){
this.challenges.filter((obj)=> obj.level == lvl);
}
well my problem is when i try to put the function after the subscribe code i keep getting an empty array because the ngOnInit runs this function first and then gets the data. how can i inverse this? i need to get the data and then run this function.
so any ideas on how to do this? and thanks
I haven't tried ( don't have access to angular2 at work :-( ), but you can have multiple statements in the lambda function in subscribe.
this._challengeService.getChallenges()
.subscribe(challenges =>
{
this.challenges = challenges;
filterByLvl(expert_level);
},
error => this.errorMessage = <any>error
);
One method would be filter directly when it retrieves the data something like:
this._challengeService.getChallenges()
.subscribe(challenges => this.challenges = challenges.filter((obj)=> obj.level == lvl),
error => this.errorMessage = <any>error);
NOTE The lvl will be undefined so you've to define it someway with your logic

RxJs - Convert Flickr request to stream of photos

I'm a RXJS newbie.
Trying to figure out why this code doesn't work.
var $sources = $('#clickme');
var flickrApi = "https://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=af11a8fa73ca2894e2f7c46ecd7a5a87&text=puppies&per_page=5&format=json&nojsoncallback=1";
Rx.Observable.fromEvent($sources, 'click')
.flatMap(click => Rx.Observable.fromPromise($.getJSON(flickrApi)))
.flatMap(response => Rx.Observable.fromArray(response.photos))
.subscribe(photo => console.log("The photo Object", photo));
The object is to run this flickr api, receive the photos and create a stream of single photo events.
For some reason subscribe doesn't happen.
Live (non-working) demo here: http://jsbin.com/pesiqo/2/edit
Thanks!
Your code is not valid JavaScript (JavaScript does not have lambdas).
You should also supply an error handler to your subscribe call to catch any runtime errors that occur. And you should check the response from Flickr to see if the request succeeded.
Just changing your code to valid JavaScript and it runs just fine, though it fails due to an invalid flickr API key.
var $sources = $('#clickme');
var flickrApi = "https://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=af11a8fa73ca2894e2f7c46ecd7a5a87&text=puppies&per_page=5&format=json&nojsoncallback=1";
Rx.Observable.fromEvent($sources, 'click')
.flatMap(function (click) {
return Rx.Observable.fromPromise($.getJSON(flickrApi));
})
.flatMap(function (response) {
if (response.stat === "fail") {
return Rx.Observable.throw(new Error(response.message));
}
return Rx.Observable.fromArray(response.photos);
})
.subscribe(function (photo) {
console.log("The photo Object", photo);
}, function (error) {
console.log("an error occurred", error, error.message, error.stack);
});
jsbin: http://jsbin.com/tupowacila/3/edit

Categories