{"componentChunkName":"component---src-templates-blog-post-jsx","path":"/blog/how-to-abstract-socket.io-connections-in-your-spa/","result":{"data":{"site":{"siteMetadata":{"name":"Huzaifa Rasheed","title":"Huzaifa Rasheed","description":"Software Engineer","about":"\n Hey, I'm Huzaifa.\n

\n Engineer by trade, builder by instinct - I believe in owning my stack, shipping fast, and occasionally running on chai (tea) and stubbornness. I work best in that sweet spot between deep focus and fast feedback - solo or in sync with a good team.\n

\n This site's my little corner of the internet - part portfolio, part lab - where I document what I build, break, or learn.\n

\n Outside work, I'm into long walks, pixel-perfect headshots in FPS games (eventually... maybe), plants I probably overwater, and the occasional \"classified\" hobby to stay curious.\n

\n Reach out anytime - my digital door's always open. 👋\n ","twitter":"https://twitter.com/huzRasheed","github":"https://github.com/huzaifa-99","linkedin":"https://www.linkedin.com/in/huzaifa-rasheed/","devto":"https://dev.to/huzaifa99","stackoverflow":"https://stackoverflow.com/users/12579290/huzaifa","leetcode":"https://leetcode.com/rhuzaifa","discord":"https://discordapp.com/users/rhuzaifa","email":"dev@rhuzaifa.com","projects":[{"name":"FFMpeg Web","description":"An experimental browser-based terminal that runs FFmpeg using WebAssembly, enabling media processing directly in the browser.","link":"https://ffmpeg-web.rhuzaifa.com/","github":"https://github.com/huzaifa-99/ffmpeg-web"},{"name":"Feed base 2","description":"A mini browser game where players manipulate 4-bit binary blocks to match target BCD values - part puzzle, part binary logic trainer.","link":"https://feedbase2.rhuzaifa.com/","github":"https://github.com/huzaifa-99/feed-base-2"},{"name":"Fabric browser extension","description":"A Chrome extension that injects engineered Fabric prompts directly into the ChatGPT interface for enhanced workflow automation.","link":"https://github.com/huzaifa-99/fabric-browser-extension","github":"https://github.com/huzaifa-99/fabric-browser-extension"},{"name":"Pure Cinema","description":"An experimental, tongue-in-cheek text-to-video generator that stitches together footage, synthesized voiceovers, and background music with a Node.js + ffmpeg pipeline. Not quite Hollywood, but it renders.","link":"https://cinema.rhuzaifa.com","github":null},{"name":"Aria2c Packload","description":"A Bash script for bulk downloading magnet links or torrents using aria2c - optimized for series or list-based transfers.","link":"https://github.com/huzaifa-99/aria2c-packload","github":"https://github.com/huzaifa-99/aria2c-packload"},{"name":"RSS Watchdog","description":"A lightweight Bash script that watches RSS/Atom feeds and compiles a Markdown-based reading checklist for Unix systems.","link":"https://github.com/huzaifa-99/rss-watchdog","github":"https://github.com/huzaifa-99/rss-watchdog"},{"name":"QuoteGen","description":"A quote graphic generator that produces stylized quote images with random selection and a built-in editor for customization.","link":"https://quotegen.rhuzaifa.com/","github":null},{"name":"WebRTC Video Chat","description":"A basic WebRTC-powered app enabling peer-to-peer video and audio calls between two users.","link":"https://webrtc-video-chat.rhuzaifa.com/","github":null}],"experience":null,"skills":[{"name":"Languages & Frameworks","description":"JavaScript, TypeScript, Python, Bash - Frameworks include Node.js, React, Next.js, Vue, React Native, FastAPI."},{"name":"Databases & Storage","description":"PostgreSQL, MySQL, MongoDB - Experience with schema design, indexing, query optimization, and migrations."},{"name":"Cloud & Infrastructure","description":"AWS (EC2, RDS, S3, Lambda), Vercel, Netlify, Heroku - Comfortable with serverless, autoscaling, and cost optimization."},{"name":"DevOps & Tooling","description":"Docker, Git, CI/CD pipelines (GitHub Actions, GitLab CI) - Experience with observability, containerization, and release workflows."},{"name":"Testing & QA Automation","description":"Jest, Playwright, Puppeteer, Selenium - Focus on E2E testing, mocking APIs, and maintaining test coverage."}]}},"markdownRemark":{"id":"1cbd72a4-ba5d-53d3-8ac9-73a637e97a65","excerpt":"Repost of https://dev.to/rhuzaifa/how-do-abstract-socketio-connections-in-your-spa-c34 When working with socketIO client in your SPA, it may become very hard to…","html":"
\n

Repost of https://dev.to/rhuzaifa/how-do-abstract-socketio-connections-in-your-spa-c34

\n
\n

When working with socketIO client in your SPA, it may become very hard to manage the socket instance, events emitters, and work with the callbacks in different places of the app. Especially when there are multiple different servers to connect with. What can be done?

\n

Solution

\n

We can create a closure that takes event callbacks as functions and return event emitters, to abstract socketIO implementation in a single file (let’s call it SocketManager.js).

\n

Example

\n
import io from \"socket.io-client\";\n\nconst SocketManager = ({\n  onCallback = () => {},\n}) => {\n  const socket = io(/* server url to connect */);\n\n  // Callbacks\n  socket.on('callback-event-name', (payload) => {\n    onCallback && onCallback(payload);\n  });\n\n  // Emitters\n  const emitEvent = (eventPayload) => {\n    socket.emit('emit-event-name', eventPayload);\n  };\n\n  return {\n    socket,\n    emitEvent\n  };\n};\n\nexport default SocketManager;
\n

then we can use this in our React code like this

\n
import React from \"react\";\nimport SocketManager from \"./SocketManager.js\";\n\nconst SocketConsumer = () => {\n  const { emitEvent } = SocketManager({\n    onCallback: handleCallback,\n  });\n\n  const handleCallback = (payload) => {\n    /** Do something with the payload */\n  };\n\n  return <button onClick={emitEvent}>Fire Event</button>;\n};\n\nexport default SocketConsumer;
\n

Hope this helps you in your projects. Thanks 🙂

","frontmatter":{"title":"How to abstract Socket.IO connections in your SPA.","date":"February 10, 2022","description":"Learn how to abstract and manage Socket.IO connections in your single-page application (SPA) with a clean and maintainable approach."}}},"pageContext":{"slug":"/blog/how-to-abstract-socket.io-connections-in-your-spa/","previous":{"fields":{"slug":"/blog/regex-the-minimum-you-need-to-know/"},"frontmatter":{"title":"Regex? The Minimum You Need To Know."}},"next":{"fields":{"slug":"/blog/running-batch-requests-in-postman/"},"frontmatter":{"title":"Running Batch Requests In Postman"}}}},"staticQueryHashes":["2276319502"]}