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 ✨.