How to use Socket.io with Vue js and Typescript
This is a practical example of how to use the socket.io-client library with vue js integrated with typescript
Previous requirements
Make sure you have Node.js and npm installed on your system. You can verify its installation by running the following commands in your terminal:
node -v
npm -v
If you don’t have Node.js and npm installed, you can download and install them from nodejs.org.
Installations
Open your terminal or command line.
Navigate to your project directory where you want to create the project. Use the cd command to change directories if necessary.
cd /path/to/your/project directory
To create a new vue project with typescript we will use vite and the command
npm create vite@latest my-vue-app -- --template vue-ts
vite@latest specifies that we will use the latest version of vite
my-vue-app replace for the name of your app
— —template vue-ts specifies that we will use typescript and create the initial configuration
Install Socket.io-client
Now open your terminal again and run the following command
npm i socket.io-client
Configuration
Open your project in your favorite Code Editor or IDE i’m using VS Code
In the src folder create new folder. You can choose the name of your folder, I will call it plugins
Create a file named socket.ts and add the following code
import { io, Socket } from "socket.io-client";
export const useSocketIO = () => {
const socket: Socket = io("ws://localhost:3001");
return {
socket,
};
};
useSocketIO is the function that we will use to call the web socket in our component or page
“ws://localhost:3001” is the URL api that we will use to use the web socket
We will see the configuration of the socket in node JS in another post
Use socket in component
You can call your useSocketIO hook on any component or page, I have created a component called SocketContext that will be present on all my pages
First we need to import our hook
import { useSocketIO } from "../plugins/socket";
Then get the socket property that comes in our hook
const { socket } = useSocketIO();
I created a vue state variable that will save whether the client is connected or disconnected from our web socket
import { ref } from "vue"
const isOnline = ref(false)
My rest api contains two events, one to connect and one to disconnect, this varies between APIS depending on your configuration
We import the onMounted hook that comes in vue
import { ref, onMounted } from "vue"
Now we call our socket when the component is mounted, we will use the connect event of our
import { ref, onMounted } from "vue"
const isOnline = ref(false)
onMounted(() => {
socket.on("connect", () => {
isOnline.value = true
});
});
When our client connects to the socket the isOnline variable will be true
We will also use the disconnect event to validate when the client disconnects, for this we will import the onUnmounted hook from vue to disconnect the socket when the component is unmounted
import { onUnmounted } from "vue"
onUnmounted(() => {
socket.on("disconnect", () => {
isOnline.value = false
})
});
You already have the socket configured with the connect and disconnect events, as I mentioned before this varies depending on your API
Listen events
You can also listen to any event that the API you use is emitting.
interface SocketMsg{
message:string,
ok:boolean
}
socket.on("new_message", (data: SocketMsg) => {
console.log(data)
})
You can use typescript interfaces if you want to find the data returned by the socket event
The final code
<template>
<div> {{ isOnline ? "Connected" : "Disconnected" }}</div>
</template>
<script lang="ts" setup>
import { useSocketIO } from "../plugins/socket";
import { ref,onMounted,onUnmounted } from "vue";
const { socket } = useSocketIO();
const isOnline = ref(false);
onMounted(() => {
socket.on("connect", () => {
isOnline.value = true
});
});
onUnmounted(() => {
socket.on("disconnect", () => {
isOnline.value = false
})
});
interface SocketMsg{
message:string,
ok:boolean
}
socket.on("new_message", (data: SocketMsg) => {
console.log(data)
})
</script>
Now you will be able to listen to and manage all the events returned by the web socket of your API.
Finally the Github repo
Good luck configuring socket io with vue and typescript ✨.