https://socket.io/assets/js/e5c6a9a8.0c5ddc88.js

1"use strict";(self.webpackChunksample_website=self.webpackChunksample_website||[]).push([[426],{3905:(e,t,a)=>{a.d(t,{Zo:()=>c,kt:()=>d});var r=a(7294);function n(e,t,a){return t in e?Object.defineProperty(e,t,{value:a,enumerable:!0,configurable:!0,writable:!0}):e[t]=a,e}function o(e,t){var a=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),a.push.apply(a,r)}return a}function l(e){for(var t=1;t<arguments.length;t++){var a=null!=arguments[t]?arguments[t]:{};t%2?o(Object(a),!0).forEach((function(t){n(e,t,a[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(a)):o(Object(a)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(a,t))}))}return e}function s(e,t){if(null==e)return{};var a,r,n=function(e,t){if(null==e)return{};var a,r,n={},o=Object.keys(e);for(r=0;r<o.length;r++)a=o[r],t.indexOf(a)>=0||(n[a]=e[a]);return n}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r<o.length;r++)a=o[r],t.indexOf(a)>=0||Object.prototype.propertyIsEnumerable.call(e,a)&&(n[a]=e[a])}return n}var i=r.createContext({}),p=function(e){var t=r.useContext(i),a=t;return e&&(a="function"==typeof e?e(t):l(l({},t),e)),a},c=function(e){var t=p(e.components);return r.createElement(i.Provider,{value:t},e.children)},u="mdxType",m={inlineCode:"code",wrapper:function(e){var t=e.children;return r.createElement(r.Fragment,{},t)}},h=r.forwardRef((function(e,t){var a=e.components,n=e.mdxType,o=e.originalType,i=e.parentName,c=s(e,["components","mdxType","originalType","parentName"]),u=p(a),h=n,d=u["".concat(i,".").concat(h)]||u[h]||m[h]||o;return a?r.createElement(d,l(l({ref:t},c),{},{components:a})):r.createElement(d,l({ref:t},c))}));function d(e,t){var a=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var o=a.length,l=new Array(o);l[0]=h;var s={};for(var i in t)hasOwnProperty.call(t,i)&&(s[i]=t[i]);s.originalType=e,s[u]="string"==typeof e?e:n,l[1]=s;for(var p=2;p<o;p++)l[p]=a[p];return r.createElement.apply(null,l)}return r.createElement.apply(null,a)}h.displayName="MDXCreateElement"},2152:(e,t,a)=>{a.r(t),a.d(t,{assets:()=>i,contentTitle:()=>l,default:()=>m,frontMatter:()=>o,metadata:()=>s,toc:()=>p});var r=a(3117),n=(a(7294),a(3905));const o={title:"Chat platform",slug:"/chat-platform/",authors:["darrachequesne"]},l=void 0,s={permalink:"/blog/chat-platform/",editUrl:"https://github.com/socketio/socket.io-website/edit/main/blog/2024-01-12-chat-platform.md",source:"@site/blog/2024-01-12-chat-platform.md",title:"Chat platform",description:"Hello everyone!",date:"2024-01-12T00:00:00.000Z",formattedDate:"January 12, 2024",tags:[],readingTime:1.065,hasTruncateMarker:!0,authors:[{name:"Damien Arrachequesne",title:"Maintainer of Socket.IO",url:"https://github.com/darrachequesne",imageURL:"https://github.com/darrachequesne.png",key:"darrachequesne"}],frontMatter:{title:"Chat platform",slug:"/chat-platform/",authors:["darrachequesne"]},prevItem:{title:"Three new adapters",permalink:"/blog/three-new-adapters/"},nextItem:{title:"Socket.IO on Azure",permalink:"/blog/socket-io-on-azure-preview/"}},i={authorsImageUrls:[void 0]},p=[{value:"Goal",id:"goal",level:2},{value:"How to use",id:"how-to-use",level:2},{value:"Features",id:"features",level:2},{value:"Channel-based messages",id:"channel-based-messages",level:3},{value:"Private messages",id:"private-messages",level:3},{value:"Tools",id:"tools",level:2},{value:"Server",id:"server",level:3},{value:"Client",id:"client",level:3},{value:"Roadmap",id:"roadmap",level:2}],c={toc:p},u="wrapper";

1function m(e){let{components:t,...o}=e;return(0,n.kt)(u,(0,r.Z)({},c,o,{components:t,mdxType:"MDXLayout"}),(0,n.kt)("p",null,"Hello everyone!"),(0,n.kt)("p",null,"A new sample project is available: the ",(0,n.kt)("strong",{parentName:"p"},"Chat platform"),"."),(0,n.kt)("p",null,"The source code can be found ",(0,n.kt)("a",{parentName:"p",href:"https://github.com/socketio/socket.io-chat-platform"},"here"),"."),(0,n.kt)("admonition",{title:"for newcomers",type:"note"},(0,n.kt)("p",{parentName:"admonition"},"Socket.IO is a library that enables low-latency, bidirectional and event-based communication between a client and a server."),(0,n.kt)("p",{parentName:"admonition"},"To achieve this, it automatically selects the best available low-level transport between ",(0,n.kt)("a",{parentName:"p",href:"https://developer.mozilla.org/en-US/docs/Web/API/WebTransport_API"},"WebTransport"),", ",(0,n.kt)("a",{parentName:"p",href:"https://developer.mozilla.org/en-US/docs/Web/API/WebSockets_API"},"WebSocket")," and HTTP long-polling, based on the capabilities of the client platform and the network.")),(0,n.kt)("h2",{id:"goal"},"Goal"),(0,n.kt)("p",null,"The goal of this project is to provide a full-blown project based on Socket.IO with:"),(0,n.kt)("ul",null,(0,n.kt)("li",{parentName:"ul"},"authentication/user registration"),(0,n.kt)("li",{parentName:"ul"},"public and private messaging"),(0,n.kt)("li",{parentName:"ul"},"proper reconnection management"),(0,n.kt)("li",{parentName:"ul"},"presence management")),(0,n.kt)("p",null,"The source code is provided with a permissive MIT license, so that you can use it/extend it to your will."),(0,n.kt)("h2",{id:"how-to-use"},"How to use"),(0,n.kt)("p",null,"Check out the code ",(0,n.kt)("a",{parentName:"p",href:"https://github.com/socketio/socket.io-chat-platform"},"here")," and follow the instructions in the README."),(0,n.kt)("h2",{id:"features"},"Features"),(0,n.kt)("h3",{id:"channel-based-messages"},"Channel-based messages"),(0,n.kt)("p",null,(0,n.kt)("img",{alt:"Screenshot of a public channel",src:a(597).Z,width:"960",height:"713"})),(0,n.kt)("h3",{id:"private-messages"},"Private messages"),(0,n.kt)("p",null,(0,n.kt)("img",{alt:"Screenshot of a private channel",src:a(511).Z,width:"960",height:"713"})),(0,n.kt)("h2",{id:"tools"},"Tools"),(0,n.kt)("h3",{id:"server"},"Server"),(0,n.kt)("p",null,"The server is written in plain JavaScript, with the ",(0,n.kt)("a",{parentName:"p",href:"https://expressjs.com/"},(0,n.kt)("inlineCode",{parentName:"a"},"express")),", ",(0,n.kt)("inlineCode",{parentName:"p"},"express-session")," and ",(0,n.kt)("a",{parentName:"p",href:"https://www.passportjs.org/"},(0,n.kt)("inlineCode",{parentName:"a"},"passport"))," packages. The database is ",(0,n.kt)("a",{parentName:"p",href:"https://www.postgresql.org/"},"PostgreSQL"),"."),(0,n.kt)("h3",{id:"client"},"Client"),(0,n.kt)("p",null,"The client is a ",(0,n.kt)("a",{parentName:"p",href:"https://vuejs.org/"},"Vue.js")," single-page application, with the ",(0,n.kt)("a",{parentName:"p",href:"https://router.vuejs.org/"},(0,n.kt)("inlineCode",{parentName:"a"},"vue-router"))," and ",(0,n.kt)("a",{parentName:"p",href:"https://pinia.vuejs.org/"},(0,n.kt)("inlineCode",{parentName:"a"},"pinia"))," packages. It uses ",(0,n.kt)("a",{parentName:"p",href:"https://getbootstrap.com/"},"Bootstrap v5")," for the styles."),(0,n.kt)("h2",{id:"roadmap"},"Roadmap"),(0,n.kt)("ul",null,(0,n.kt)("li",{parentName:"ul"},"React client (",(0,n.kt)("a",{parentName:"li",href:"https://github.com/socketio/socket.io-chat-platform/issues/1"},"link"),")"),(0,n.kt)("li",{parentName:"ul"},"MongoDB server (",(0,n.kt)("a",{parentName:"li",href:"https://github.com/socketio/socket.io-chat-platform/issues/2"},"link"),")")),(0,n.kt)("p",null,"Any additional suggestion is welcome!"))}m.isMDXComponent=!0},597:(e,t,a)=>{a.d(t,{Z:()=>r});const r=a.p+"assets/images/channel_based_messages-e47afe4bd8d7b48f77493987d1cbdc23.png"},511:(e,t,a)=>{a.d(t,{Z:()=>r});const r=a.p+"assets/images/private_messages-da29f732b66ddc3c178de377d9ba6725.png"}}]);