forked from noxious/client
71 lines
2.0 KiB
TypeScript
71 lines
2.0 KiB
TypeScript
import { defineStore, type StoreDefinition } from 'pinia'
|
|
import { io, Socket } from 'socket.io-client';
|
|
import {useCookies} from '@vueuse/integrations/useCookies'
|
|
import config from '@/config';
|
|
import type { Character, User } from '../../env'
|
|
|
|
export const useSocketStore: StoreDefinition<any> = defineStore('socket', {
|
|
state: () => ({
|
|
connection: null as Socket | null,
|
|
user: null as User | null,
|
|
character: null as Character | null,
|
|
}),
|
|
getters: {
|
|
getConnection: (state: any) => state.connection as Socket,
|
|
getUser: (state: any) => state.user as User,
|
|
getCharacter: (state: any) => state.character as Character,
|
|
},
|
|
actions: {
|
|
setupSocketConnection() {
|
|
this.connection = io(config.server_endpoint, {
|
|
withCredentials: true,
|
|
transports: ['websocket'],
|
|
reconnectionAttempts: 5,
|
|
});
|
|
|
|
// Let the server know the user is logged in
|
|
this.connection.emit('login');
|
|
|
|
// set user
|
|
this.connection.on('login', (user: User) => {
|
|
this.setUser(user);
|
|
});
|
|
|
|
// When we can't reconnect, disconnect
|
|
this.connection.on('reconnect_failed', () => {
|
|
console.log("Reconnect failed")
|
|
this.disconnectSocket();
|
|
})
|
|
|
|
this.connection.on('notification', (data: any) => {
|
|
if(data.error) console.error(data.error);
|
|
if (data.success) console.log(data.success);
|
|
if (data.message) console.log(data.message);
|
|
});
|
|
},
|
|
disconnectSocket() {
|
|
if (!this.connection) return;
|
|
|
|
this.connection.disconnect();
|
|
this.connection = null;
|
|
|
|
this.user = null;
|
|
this.character = null;
|
|
|
|
useCookies().remove('token');
|
|
},
|
|
setUser(user: User|null) {
|
|
this.user = user;
|
|
},
|
|
setCharacter(character: Character|null) {
|
|
this.character = character;
|
|
}
|
|
}
|
|
});
|
|
|
|
/**
|
|
* Resources:
|
|
* https://www.dynetisgames.com/2017/03/06/how-to-make-a-multiplayer-online-game-with-phaser-socket-io-and-node-js/
|
|
* https://runthatline.com/pinia-watch-state-getters-inside-vue-components/
|
|
* https://pinia.vuejs.org/
|
|
*/ |