import * as Stomp from "stompjs";
import _ from "lodash";
export const MESSAGE_TYPE_CHAT_TYPING = "ChatTyping";
export const MESSAGE_TYPE_CHAT_MESSAGE = "ChatMessage";
export const RECONNECT_DELAY = 3000;
export function wsConnect(user, callback, ondisconnected) {
const webSocket = Stomp.client(url);
webSocket.debug = () => {};
webSocket.connect({},() => {
callback ? callback(webSocket) : _.noop();
},
error => {
// console.log(error);
console.log("Connection lost...");
if (ondisconnected) {
ondisconnected();
}
}
);
return webSocket;
}
The connection between the StompJs over WebSocket is established only when the app is in debugging mode.
I recently came across the same problem and fixed it by installing text-encoding package and enabling forceBinaryWSFrames and appendMissingNULLonIncoming properties
npm install text-encoding --save
Add import * as encoding from 'text-encoding'; to App.js
const client = Stomp.over(socket);
client. Connect({
forceBinaryWSFrames:true,
appendMissingNULLonIncoming:true
}, (frame) => {
console.log('Connected: ' + frame);
});
Related
I'm having some trouble getting Pinia to work properly with two boot files.
Boot file #1 (authentication.js) fetches information about the current user and replaces the object in the userInfoStore:
import { boot } from 'quasar/wrappers';
import userClient from 'src/api/userClient';
import { useUserInfoStore } from 'stores/userInfo';
export default boot(async ({ router, store }) => {
const userInfoStore = useUserInfoStore(store);
router.beforeEach(async () => {
try {
const response = await userClient.getUserInfo();
userInfoStore.$state = response.data;
return true;
} catch (error) {
// error handling
}
return true;
});
});
Then, in boot file #2 (casl.js) I'd like to read the state from the userInfoStorelike this:
import { boot } from 'quasar/wrappers';
import { useUserInfoStore } from 'stores/userInfo';
export default boot(async ({ store }) => {
const userInfoStore = useUserInfoStore(store);
console.log(userInfoStore.givenName);
});
The givenName is always undefined. Inspecting the store via the Vue DevTools, however, shows a givenName. And printing console.log(userInfoStore.$state)also shows the name.
What could be wrong here?
After upgrading from firebase v8 to v9 I have this problem, writing to firestore works fine in web browser but not on IOS / Android (no writing is done), after few minutes I have this warning:
#firebase/firestore:, Firestore (9.1.3): Connection, WebChannel transport errored:, me ...
summary of the code
import { initializeApp } from 'firebase/app'
import { getFirestore } from "firebase/firestore"
import { doc, setDoc } from "firebase/firestore"
const app = initializeApp(config)
const db = getFirestore(app);
const MyComponent = () => {
...
useEffect(() => {
(async function zda() {
await setDoc(doc(db, "users", "mario"), {
employment: "plumber",
outfitColor: "red",
specialAttack: "fireball"
})
})()
}, [])
By the way, I solved my problem with this line
const db = initializeFirestore(app, {useFetchStreams: false})
I have a react native app (ios) with multiple languages. I'm currently facing a weird issue: when I open the app, for a split second, I don't see the translations but I see an error: 'missing translation ...'. This error normally shows up when the translation key is not found (key-value pair) in the json file. Like I said, this error is only there for a split second, after like 500ms, the translations pop up. It seems like the translation file is not loaded properly when the app starts up.
This error is new since the last few days, before that it didn't happen. It also does not happen on the ios simulator, but only when I'm testing on a device. Both the debug scheme and the release scheme have this issue.
My language file looks like this:
// en.json
// { key: value }
{
"hello": "Hello",
"world": "World",
...
}
This is my code in react-native:
import React, { useEffect } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { _setLanguage } from '../redux/Actions';
import _ from 'lodash';
import i18n from 'i18n-js';
import * as RNLocalize from "react-native-localize";
const translationGetters = {
'en': () => require('./translations/en.json')
};
export default useLanguage = (props) => {
const dispatch = useDispatch();
// get the stored language in the redux store (if set)
const _language = useSelector(state => state.data.config.language);
// translate function to memoize the language file
const translate = _.memoize(
(key, config) => i18n.t(key, config),
(key, config) => (config ? key + JSON.stringify(config) : key)
);
// useEffect function loaded on start up to get the language from redux
// (if set) or from the device
// setLanguage() is called to load the correct language file
useEffect(() => {
if (_.isNull(_language)) {
const fallback = { languageTag: 'en' };
const { languageTag } = RNLocalize.findBestAvailableLanguage(Object.keys(translationGetters)) || fallback;
dispatch(_setLanguage({ language: languageTag }));
setLanguage(languageTag);
} else {
setLanguage(_language);
}
}, []);
// setLanguage()
// sets the language file
const setLanguage = (language) => {
translate.cache.clear();
i18n.translations = { ['en']: translationGetters['en'](), [language]: translationGetters[language]() };
i18n.locale = language;
i18n.defaultLocale = 'en';
i18n.fallbacks = true;
i18n.missingTranslation = () => (null);
dispatch(_setLanguage({ language }));
};
return {
setLanguage,
language: _language,
translate
};
};
I am trying to integrate Amplitude to my React Native project. I am currently still developing the application and using Expo. The first event I am trying to capture is when a user is logged in.
const events = {
USER_LOGGED_IN: 'USER_LOGGED_IN',
USER_CREATED_ACCOUNT: 'USER_CREATED_ACCOUNT',
};
let isInitialized = false;
const apiKey = 'xxxxxxxxxxxxxxxxxxxxxxxx';
const initialize = () => {
if (!Environment.isProduction || !apiKey) {
return;
}
Amplitude.initialize(apiKey);
isInitialized = true;
};
In my render function (above the return) I have this line of code:
render() {
Expo.Amplitude.logEvent('USER_LOGGED_IN')
return (
I am not seeing any events coming into amplitude. Is it possible to see events while using expo to run my code?
Note- this code is in my home screen component
You need to publish your Expo app to see the events on Amplitude because the integration works only on prod env. Once your app is published, you'll see the events on Amplitude dashboard with a small delay, usually 1 minute.
This is what I did for amplitude to work
expo install expo-analytics-amplitude
Analytics.js
import * as Amplitude from 'expo-analytics-amplitude'
let isInitialized = false
const apiKey = 'YOUR_KEY_HERE'
export const events = {
HOME: 'HOME'
}
export function initialize() {
if (isInitialized || !apiKey) {
return
}
Amplitude.initialize(apiKey)
isInitialized = true
}
export function track(event, options) {
initialize()
if (options) {
Amplitude.logEventWithProperties(event, options)
} else {
Amplitude.logEvent(event)
}
}
export default {
events,
initialize,
track
}
Import in the file where you need tracking
import Analytics from '../auth/Analytics'
...
useEffect(() => {
Analytics.track(Analytics.events.HOME)
}, [])
Expanding on the code above, I made a few minor updates. I will update this if I find a better way to fully integrate.
expo install expo-analytics-amplitude
import * as Amplitude from 'expo-analytics-amplitude'
let isInitialized = false
const apiKey = 'your API key'
export const events = {
HOME: 'HOME'
}
export function initialize() {
if (isInitialized || !apiKey) {
return
}
Amplitude.initializeAsync(apiKey)
isInitialized = true
}
export function track(event, options) {
initialize()
if (options) {
Amplitude.logEventWithPropertiesAsync(event, options)
} else {
Amplitude.logEventAsync(event)
}
}
export default {
events,
initialize,
track
}
Import into the file you need tracking.
I initialized my connection to Amplitude in App.js.
import Analytics from "./app/auth/Analytics";
useEffect(() => {
Analytics.initialize()
Analytics.track(Analytics.events.HOME)
}, []);
I am using react-native 0.49.3 version, My Question is how to get the device token in react native for both IOS and Android I tried with this link but it not working for me, right now I tried in IOS. how to resolve it can one tell me how to configure?
I tried different solutions and I've decided to use React Native Firebase.
Here you will find everything about Notifications.
Also, you can use the others libraries that come with Firebase, like Analytics and Crash Reporting
After set up the library you can do something like:
// utils/firebase.js
import RNFirebase from 'react-native-firebase';
const configurationOptions = {
debug: true,
promptOnMissingPlayServices: true
}
const firebase = RNFirebase.initializeApp(configurationOptions)
export default firebase
// App.js
import React, { Component } from 'react';
import { Platform, View, AsyncStorage } from 'react-native';
// I am using Device info
import DeviceInfo from 'react-native-device-info';
import firebase from './utils/firebase';
class App extends Component {
componentDidMount = () => {
var language = DeviceInfo.getDeviceLocale();
firebase.messaging().getToken().then((token) => {
this._onChangeToken(token, language)
});
firebase.messaging().onTokenRefresh((token) => {
this._onChangeToken(token, language)
});
}
_onChangeToken = (token, language) => {
var data = {
'device_token': token,
'device_type': Platform.OS,
'device_language': language
};
this._loadDeviceInfo(data).done();
}
_loadDeviceInfo = async (deviceData) => {
// load the data in 'local storage'.
// this value will be used by login and register components.
var value = JSON.stringify(deviceData);
try {
await AsyncStorage.setItem(config.DEVICE_STORAGE_KEY, value);
} catch (error) {
console.log(error);
}
};
render() {
...
}
}
Then you can call the server with the token and all the info that you need.