We Keep Coding

Referencing a Vue component (from a socket function)

so what I am currently working on is using vue with socketIO. So I want a component that updates its data when the websocket emits something.
I looked at the following tutorial: https://medium.com/#michaelmangial1/getting-started-with-vue-js-socket-io-8d385ffb9782.
The connection to the websocket works fine however I don't know how I can change a data variable of the component or call a method of the component from the websocket function as I get the error that e.g. this.getAllLayouts is not a function.
In the tutorial they just set app.title = data.title; in socket.on() as the Vue instance can be addresses as app.
But now I am confused. I wanted to use this in an component which I defined as a single-file component. So I can't use this app reference. But how can I reference the component in that case?
Below you can see the most important parts of this component. I defined the socket connection in the created() of the component
<script>
import axios from 'axios';
// eslint-disable-next-line
import io from 'socket.io-client';
import FirstPage from './FirstPage.vue';
import DNDAssign from './DNDAssign.vue';
export default {
name: 'ControlCenter',
data() {
return {
devices: [{ ip: 'yet unknown' }], // placeholder so line 12 does not throw error before actual device info fetched
thisDeviceIndex: 0,
currentLayoutIndex: 0,
layouts: [],
};
},
components: {
DNDAssign,
FirstPage,
},
methods: {
getAllLayouts() {
const path = 'http://192.168.0.38:5000/layouts';
axios.get(path)
.then((response) => {
console.log(response);
this.layouts = response.data.layouts;
this.devices = response.data.devices;
this.thisDeviceIndex = response.data.your_device_index;
console.log(this.layouts);
})
.catch((error) => {
// eslint-disable-next-line
console.log(error);
});
},
},
created() {
// inital fetching of layouts
console.log('fetching layouts from backend');
this.getAllLayouts();
// test websocket connection
const socket = io.connect('http://192.168.0.38:5000');
// eslint-disable-next-line
socket.on('connect', function () {
console.error('connected to webSocket');
socket.emit('my event', { data: 'I\'m connected!' });
});
// eslint-disable-next-line
socket.on('my response', function(data){
console.log('got response');
console.log(data.data);
});
// eslint-disable-next-line
socket.on('update_on_layouts', function(data){
this.getAllLayouts(); //this does not work? How can I make it work or do something like
// this.layouts = data;
});
},
};
</script>

Issue is that this inside that fn is not binded to Vue, you need to lexically bind it
Use arrow method to bind this to method
socket.on('update_on_layouts', data => {
this.getAllLayouts(); //this does not work? How can I make it work or do something like
// this.layouts = data;
});

Unable to use an axios plugin in nuxt

I'm attempting to add an Axios plugin to Nuxt as described here, but it doesn't seem to work.
This is my plugins/axios.js file...
export default function({ $axios }) {
console.log('Im in the axios plugin')
$axios.defaults.baseURL = `https://localhost:5001/api`
$axios.defaults.headers = {
Accept: 'application/json',
'Content-Type': 'application/json'
}
$axios.onRequest((config) => {
console.log('Making request to ' + config.url)
})
}
This is my nuxt.config.js
plugins: ['~/plugins/axios'],
modules: ['#nuxtjs/axios']
And this is where I use Axios in a file called services/BookService.js:
import axios from 'axios'
export default {
getBooks() {
return axios.get('/Home')
},
getBooksFiltered(payload) {
return axios.post('/Home/Filters', payload)
}
}
I get the console.log('Im in the axios plugin') from within my plugin, but nothing else. $axios.onRequest doesn't appear to run, and the baseURL doesn't appear to be set correctly when getBooksFiltered is triggered. I get a 404 when it tried to hit the address http://localhost:3000/Home/Filters. As described in my plugin, the address should be https://localhost:5001/api/Home/Filters
I've also tried the following in my nuxt.config.js, but it doesn't work:
axios: {
baseURL: 'https://localhost:5001/api'
}
Any ideas?
Edit
I've modified my services/BookService.js based on the suggestion below to the following...
export default {
getBooks(axios) {
console.log('Im in getBooks')
return axios.get('/Home')
}
}
My action request that makes my api call is the following....
import BookService from '~/services/BookService.js'
export const fetchBooks = (context) => {
console.log('Im in fetchBooks action')
return BookService.getBooks(this.$axios)
.then((response) => {
context.commit('SET_BOOKS', response.data.booksList)
})
.catch((error) => {
console.log(error)
})
}
And my method in my component that calls the actions...
async fetch({ store, error }) {
try {
console.log('Im in index -> fetch')
await store.dispatch('fetchBooks')
} catch (e) {
error({
statusCode: 503,
message: 'Unable to fetch books at this time'
})
}
}
I'm aware that I may be mixing async/await with promises incorrectly but I don't believe it's the cause of this issue.
Console returns the following...
My network tab contains a single request to http://localhost:3000/ which seems incorrect. It should be https://localhost:5001/api/Home based on the plugin and the address specified in the action. It is also never entering $axios.onRequest

The axios-module sets up an Axios instance on the Nuxt app instance. When you import Axios from axios, and use it directly, you're not using the previously setup Axios instance.
To fix the issue, you could either reference the preconfigured Axios instance from window.$nuxt.$axios (only in the browser), or setup your service to take an Axios instance as a parameter:
// services/BookService.js
export default axios => ({
getBooks() {
return axios.get('/Home')
},
getBooksFiltered(payload) {
return axios.post('/Home/Filters', payload)
}
})
// store.js
import BookService from '~/services/BookService.js'
export default {
actions: {
async getBooks({ commit }) {
const books = await new BookService(this.$axios).getBooks()
commit('SET_BOOKS', books)
}
}
}
Another solution from nuxt-community/axios-module #28:
~/plugins/axios-port.js
import { setClient } from '~/services/apiClient'
export default ({ app, store }) => {
setClient(app.$axios)
}
~/services/apiClient.js
let client
export function setClient (newclient) {
client = newclient
}
// Request helpers
const reqMethods = [
'request', 'delete', 'get', 'head', 'options', // url, config
'post', 'put', 'patch' // url, data, config
]
let service = {}
reqMethods.forEach((method) => {
service[method] = function () {
if (!client) throw new Error('apiClient not installed')
return client[method].apply(null, arguments)
}
})
export default service
Use:
import apiClient from '~/services/apiClient'
export default {
async current () {
return apiClient.get('...')
}
}

In my case I exported a customized axios instance as the doc suggested in my axios.js
export default function ({ $axios }, inject) {
const api = $axios.create({
baseURL:'/api'
})
// Inject to context as $api
inject('api', api)
}
Then use this.$api.get or this.$api.post in your getBook service
The above one works for me

As I have just tested, in each request we should use $axios.
Example: this.$axios.get('....'), or in another context this.$nuxt.$axios.get('...');
Because axios extension use with the app context instance, if we import, it will create a new instance which plugin cannot extend.
I have put test code on stackblitz: here

It seems you need to yarn add #nuxtjs/axios or npm install #nuxtjs/axios like the setup instruction here before it can work: https://axios.nuxtjs.org/setup
I haven't experienced with nuxt yet but I don't think by adding some line of code into some js file without actually installing will make the package available into your repo.

Find service promise fails in feathersJs

I am writing my first feathersjs app. Server side is fine, tested with postman and working perfectly. Client side I keep getting a failed promise on the 'find' service as it is out of the box. I am quite new to JS in general and very new to feathers, so probably have missed something very obvious. In the code below the TradeService.find always throws a failed promise.
I am inside a non-ejected CRA with mobx, but I don't think that is a problem. I have been watching tutorials and reading stuff.
I have a feathers.js file
import io from "#feathersjs/socketio-client";
import feathers from "#feathersjs/client";
const socket = io("http://localhost:3030");
const client = feathers().configure(feathers.socketio(socket));
const TradeService = client.service("trades");
export { client, TradeService };
Then the main file where it all goes wrong looks like this
import { TradeService } from "../../feathers";
#observer
export default class HeadlineReportPage extends Component {
constructor(props) {
super(props);
this.state = {
trades: []
};
}
componentDidMount() {
this.fetchFromServer();
}
fetchFromServer = async () => {
console.log("tradeService: " + TradeService);
await TradeService.find({
query: {
$limit: 0
}
})
.then(res => {
console.log("in then");
console.log("total is " + res.total);
setState({ trades: res.data });
})
.catch(res => console.log("Failed promise :" + res));
};
I stole most of this code from examples online, so was expecting it to just get to the 'then', but it goes to the catch every time. I have tried with and without the async/await.

Unable to subscribe on topic using #stomp/stompjs

Here is a part of my React component:
import React from 'react';
import { Client } from '#stomp/stompjs';
class Balance extends React.Component {
componentDidMount() {
const client = new Client({
brokerURL: 'ws://localhost:8080/stomp',
debug: (str) => {
console.log(str);
},
});
client.onConnect(() => {
console.log('onConnect');
client.subscribe('/topic/balance', message => {
console.log(message);
})
});
client.activate();
}
...
It looks like connection was established according to the debug output to browser's console:
Opening Web Socket...
Web Socket Opened...
>>> CONNECT
accept-version:1.0,1.1,1.2
heart-beat:10000,10000
Received data
<<< CONNECTED
heart-beat:0,0
version:1.2
content-length:0
connected to server undefined
However, I don't see a message 'onConnect' in console, which means client.onConnect was never fired.
Therefore I can't subscribe to a topic.
What could be a problem here?
UPDATE:

According to author it was a mix up in syntax of the library.
The corrected code from my question look as the following:
import React from 'react';
import { Client } from '#stomp/stompjs';
class Balance extends React.Component {
componentDidMount() {
// The compat mode syntax is totally different, converting to v5 syntax
// Client is imported from '#stomp/stompjs'
this.client = new Client();
this.client.configure({
brokerURL: 'ws://localhost:8080/stomp',
onConnect: () => {
console.log('onConnect');
client.subscribe('/topic/balance', message => {
console.log(message);
})
},
// Helps during debugging, remove in production
debug: (str) => {
console.log(new Date(), str);
}
});
this.client.activate();
}
...
I created a full working example in my repo.

Raven throws warnings when testing via Jest

I'm trying to test my GraphQL api through Jest and every time I run my tests I keep getting this alert:
raven#2.5.0 alert: This looks like a browser environment; are you sure you don't want Raven.js for browser JavaScript?
The cause:
I create a custom Error class that inherits from Error:
import logError from './errors';
class LoggedErrorClass extends Error {
constructor(error) {
logError(error);
const prototype = new.target.prototype;
if (typeof error === 'string') {
super(error);
} else {
super(error.message);
}
this.__proto__ = prototype;
}
}
LoggedError = LoggedErrorClass;
And use it like this:
if (!user || !Roles.userIsInRole(user._id, ['admin', 'customer'])) {
throw new LoggedError('Access denied');
}
logError is a function that uses Raven. Because I use Meteor I do LoggedError = LoggedErrorClass to make LoggedError accessible globally (notice, I don't export LoggedErrorClass)
My test looks like this:
import { graphql } from 'graphql';
import schema from '../../../graphql';
describe('getMobileSettings query', function() {
// global.LoggedError = class extends Error {
// constructor(...args) {
// super(...args);
// Error.captureStackTrace(this, Error);
// }
// };
it('should work', async () => {
const query = `
query getMobileSettings($app: String!) {
getMobileSettings(app: $app)
}`;
const [rootValue, context, params] = [{}, {}, { app: 'web' }];
await graphql(schema, query, rootValue, context, params);
});
});
I've tried setting LoggedError with the help of global but it didn't help. So, I can't just call jest.mock('path/to/file') because I don't export it. Also, it seems quite weird that Raven is here, because I use it in logError which I only import in a file where I create LoggedErrorClass

Ok, after some digging, I figured out the solution.
I decided not to mock LoggedError class but rather mock logError function that my class uses. As a result I came up with this code that mocks Raven behaviour:
const Raven = {};
const install = jest.fn();
const config = jest.fn();
Raven.install = install;
Raven.config = config;
// mocking chained function calls
install.mockImplementation((...args) => {
return Raven;
});
config.mockImplementation((...args) => {
return Raven;
});
export default Raven;
I've also updated my jest.conf.js by adding raven to moduleNameMapper:
module.exports = {
moduleNameMapper: {
'^meteor/(.*)': '<rootDir>/tests/.mocks/meteor/index.js',
raven: '<rootDir>/tests/.mocks/npm/raven.js',
},
automock: false,
clearMocks: true,
};