Is there a way to access the socket instance within the setup function of a Vue.js component?
I am utilizing vue-3-socket.io
in my main.js
import VueSocketIO from 'vue-3-socket.io'
import SocketIO from 'socket.io-client'
Vue.use(new VueSocketIO({
debug: true,
connection: SocketIO('http://metinseylan.com:1992', {}),
vuex: {
store,
actionPrefix: "SOCKET_",
mutationPrefix: "SOCKET_"
}
})
);
My approach involves utilizing socket.io directly, without relying on a Vue Plugin:
export const useSocketIO = () => {
const socket = io('http://metinseylan.com:1992')
return {
socket,
}
}
Component
<script setup>
import { defineComponent } from 'vue'
const { socket } = useSocketIO()
socket.on('welcome', () => { console.log('welcome') })
</script>
Initially, I followed the advice from @kissu () but encountered an issue where it resulted in multiple socketIO connections being created. This caused problems such as sending messages to everyone except the sender not functioning as expected due to receiving the message through other client connections.
My current approach involves creating an object of the class and importing the object instead of the class itself.
src/services/socketio.service.ts
import type { Socket } from "socket.io-client";
import { io } from "socket.io-client";
import type { ClientToServerEvents, ServerToClientEvents } from "../communication";
class SocketIOService {
socket: Socket<ServerToClientEvents, ClientToServerEvents>;
constructor() {
this.socket = io(process.env.VUE_APP_SOCKET_ENDPOINT || "http://localhost:3000" );
}
}
// create an instance/connection here
export const socket = new SocketIOService().socket;
src/components/myButton.vue
<script setup lang="ts">
// import the object instead of the class
import { socket } from "../services/socketio.service";
async function buttonPress() {
socket.emit("buttonPressed");
}
</script>
This modification ensures that multiple components will share the same socketio connection :)
I'm encountering an issue with a particular function in my code function readComm(){ $.post("something.php", {read:"read"}, function(data){ retVal = $.trim(data).toString(); console.log(retVal); return retVal; }); } T ...
I created a js script that dynamically changes the content of certain div elements at specified intervals. While I appreciate how it functions, I now need to modify it so that the script only executes once. Can someone help me achieve this? <script typ ...
I have successfully implemented the Histogram chart using react-plotlyjs. The graph is working fine but now I need to draw the normal distribution curve using X and Y axes. While I have the coordinates for the X axis, the Y axis values are automatically ca ...
In my latest project, I am developing a cutting-edge app that converts text to sound, utilizing input text from react-native-elements along with ternary operators. My main challenge now is figuring out how to validate whether the text input box is empty ...
I'm currently developing a web application to handle the administrative tasks for a restaurant. The main functionalities include creating new orders, adding order items, and managing financial overviews. One of the key features is the ability to view ...
Currently, I am on the rc-form 2.4.8 version and I am utilizing the getFieldDecorator method in my codebase. However, an issue has arisen: Warning: defaultValue is not a valid property for getFieldDecorator; the correct use is to set value, so please uti ...
Hey there! Could you please review my code? I'm attempting to add a top position to the <li> element using a variable in jQuery, but I'm not sure how to do it. Here's the code: <script> $(document).ready(function(){ ...
event.js import React, { useEffect, useState } from 'react'; import { useDispatch, useSelector } from 'react-redux'; import { Link, useHistory } from 'react-router-dom'; import { addEvent } from '../actions/event'; ...
Hey there! I'm new to working with nodejs and mongodb, and I'm trying to create a function that updates the win, lose, and draw record in my UserSchema. Here's my Schema: UserSchema = new mongoose.Schema({ username:'string', ...
I've been working on a micro-frontend project, utilizing vue 3 and single-spa 5.9.3. Recently, I attempted to update one of the npm packages for a Micro-frontend to the latest release. The build process went smoothly, but it resulted in the following ...
My website doesn't require frequent content updates, as users don't always need the latest information. As a result, most pages are generated server-side and served as static pages. There will be occasional database updates that need to be visib ...
Working with API endpoints that require authentication for image retrieval. Utilizing a service called authenticatedHttp as an abstraction over $http to manage authentication tokens successfully. Successfully receiving response, converting blob to object ...
As I begin my journey with React, I find myself questioning the best practices for displaying data. Should I always break down components into smaller ones rather than having one large component render everything? It seems like a good practice, but I' ...
I'm currently developing a basic widget that allows the user to change the value of either the check box OR the entire div by selecting them. Below is the code I have implemented: $(document).ready(function() { $(document).on("click", ".inputChec ...
I am struggling to position a set of circles around a parent div in my code. I want 6 circles to form a circle around the parent div, but they are not lining up correctly. Can someone help me identify what I'm doing wrong? var div = 360 / 6; var ra ...
I'm experiencing an issue in my app where routes work fine when I use router.map({}) with the vue-router, but they fail to work when I pass them directly in the constructor. Any insight into why this might be happening? // Routes that work: const rou ...
I've recently ventured into the use of the @nuxtjs/strapi package in combination with Strapi 4 and Nuxt 3. Unfortunately, I have found that this module is not well-documented, leaving me unsure about how to properly extract information from my API. He ...
I am dealing with dynamic data that needs to be displayed in a radio button format. One of the challenges is comparing the dynamically generated id with the active radio id and setting it as checked using Radio.Group. Unfortunately, the current code is no ...
Upon executing the code provided below, I encounter the following error message. An issue has arisen: Cannot find function contains in object Is Patient Fasting?/# of Hours->Yes; 12 hours. Here is the snippet of my code: var i = 0; var tempF ...
I am currently facing a challenge in embedding images into my emails where I need to encode them using an online tool. The issue I am encountering is that the email template I am using has a dynamic URL, with ${loginurl}/images as the path to my image. H ...