var Component=(()=>{var m=Object.create;var t=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var N=Object.getPrototypeOf,k=Object.prototype.hasOwnProperty;var b=(a,n)=>()=>(n||a((n={exports:{}}).exports,n),n.exports),g=(a,n)=>{for(var s in n)t(a,s,{get:n[s],enumerable:!0})},i=(a,n,s,l)=>{if(n&&typeof n=="object"||typeof n=="function")for(let c of u(n))!k.call(a,c)&&c!==s&&t(a,c,{get:()=>n[c],enumerable:!(l=h(n,c))||l.enumerable});return a};var y=(a,n,s)=>(s=a!=null?m(N(a)):{},i(n||!a||!a.__esModule?t(s,"default",{value:a,enumerable:!0}):s,a)),f=a=>i(t({},"__esModule",{value:!0}),a);var r=b((I,o)=>{o.exports=_jsx_runtime});var v={};g(v,{default:()=>d,frontmatter:()=>w});var e=y(r()),w={title:"Simple chat application using React and Socket.io",date:"2015-08-10",tags:["node.js","react","socket.io","websockets"]};function p(a){let n={a:"a",code:"code",h2:"h2",h3:"h3",li:"li",p:"p",pre:"pre",span:"span",ul:"ul",...a.components};return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsxs)(n.h2,{id:"from-angular-to-react",children:[(0,e.jsx)(n.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#from-angular-to-react",children:(0,e.jsx)(n.span,{className:"icon icon-link"})}),"From Angular to React"]}),` `,(0,e.jsxs)(n.p,{children:["Life has been busy! It\u2019s been a while since I had time to blog about anything. Hopefully I can find time to come back and record some of my learning with Angular. After about a year of developing with Angular I wanted to get my feet wet with ",(0,e.jsx)("a",{href:"http://facebook.github.io/react/",target:"_blank",children:"React"}),"\xA0and find out what all the buzz is about."]}),` `,(0,e.jsxs)(n.h2,{id:"firstimpressions",children:[(0,e.jsx)(n.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#firstimpressions",children:(0,e.jsx)(n.span,{className:"icon icon-link"})}),"First\xA0Impressions"]}),` `,(0,e.jsx)(n.p,{children:'At first glance React seems easier to understand than Angular, and is certainly lighter weight because it\u2019s a library not a complete framework. I like that React components are self-contained and reusable, but it was a little strange mixing the markup and programming logic when I\u2019ve been so ingrained with "separation of concerns".'}),` `,(0,e.jsx)(n.p,{children:"One thing that seems a little clunky to me is that in order for components to communicate with each other you have to pass variables around through properties. That could quickly get tedious if you have several levels of nesting, and might be hard to follow the trail of properties back up the chain to where they are actually controlled. It seems like some sort of scope inheritance would be a lot easier. At any rate, it\u2019s been fun to try it out. You learn a lot quickly when you leave the tutorials behind and actually try to build something on your own."}),` `,(0,e.jsxs)(n.h2,{id:"demo-app",children:[(0,e.jsx)(n.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#demo-app",children:(0,e.jsx)(n.span,{className:"icon icon-link"})}),"Demo App"]}),` `,(0,e.jsxs)(n.p,{children:["Here\u2019s a little demo chat application that I put together while learning. This uses\xA0",(0,e.jsx)("a",{href:"https://nodejs.org/",target:"_blank",children:"Node.js"})," and ",(0,e.jsx)("a",{href:"http://expressjs.com/",target:"_blank",children:"Express"})," for the server, ",(0,e.jsx)("a",{href:"http://facebook.github.io/react/",target:"_blank",children:"React"})," for the interface, and ",(0,e.jsx)("a",{href:"http://socket.io/",target:"_blank",children:"Socket.io"})," to keep clients in sync via websockets. I also used ",(0,e.jsx)("a",{href:"http://bower.io/",target:"_blank",children:"Bower"})," to manage local\xA0copies of the libraries. If you don\u2019t want to use Bower, you can link to the scripts however you like. I found it\xA0to be really helpful for local development though. It\u2019s nice to get some work done on the train during my commute, but I don\u2019t have internet access there, so having a local copy of the resources comes in handy."]}),` `,(0,e.jsxs)(n.h3,{id:"publicindexhtml",children:[(0,e.jsx)(n.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#publicindexhtml",children:(0,e.jsx)(n.span,{className:"icon icon-link"})}),"public/index.html"]}),` `,(0,e.jsx)(n.pre,{className:"language-html",children:(0,e.jsxs)(n.code,{className:"language-html code-highlight",children:[(0,e.jsxs)(n.span,{className:"code-line line-number",line:"1",children:[(0,e.jsxs)(n.span,{className:"token doctype",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:""})]}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"2",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),"html"]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"3",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),"head"]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"4",children:[" ",(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),"title"]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),"Chat App",(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:""})]}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"5",children:[" ",(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),"script"]})," ",(0,e.jsx)(n.span,{className:"token attr-name",children:"src"}),(0,e.jsxs)(n.span,{className:"token attr-value",children:[(0,e.jsx)(n.span,{className:"token punctuation attr-equals",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:'"'}),"bower_components/react/react.js",(0,e.jsx)(n.span,{className:"token punctuation",children:'"'})]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,e.jsx)(n.span,{className:"token script"}),(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:""})]}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"6",children:[" ",(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),"script"]})," ",(0,e.jsx)(n.span,{className:"token attr-name",children:"src"}),(0,e.jsxs)(n.span,{className:"token attr-value",children:[(0,e.jsx)(n.span,{className:"token punctuation attr-equals",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:'"'}),"bower_components/react/JSXTransformer.js",(0,e.jsx)(n.span,{className:"token punctuation",children:'"'})]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,e.jsx)(n.span,{className:"token script"}),(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:""})]}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"7",children:[" ",(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),"script"]})," ",(0,e.jsx)(n.span,{className:"token attr-name",children:"src"}),(0,e.jsxs)(n.span,{className:"token attr-value",children:[(0,e.jsx)(n.span,{className:"token punctuation attr-equals",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:'"'}),"/socket.io/socket.io.js",(0,e.jsx)(n.span,{className:"token punctuation",children:'"'})]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,e.jsx)(n.span,{className:"token script"}),(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:""})]}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"8",children:[" ",(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),"script"]})," ",(0,e.jsx)(n.span,{className:"token attr-name",children:"src"}),(0,e.jsxs)(n.span,{className:"token attr-value",children:[(0,e.jsx)(n.span,{className:"token punctuation attr-equals",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:'"'}),"app.js",(0,e.jsx)(n.span,{className:"token punctuation",children:'"'})]})," ",(0,e.jsx)(n.span,{className:"token attr-name",children:"type"}),(0,e.jsxs)(n.span,{className:"token attr-value",children:[(0,e.jsx)(n.span,{className:"token punctuation attr-equals",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:'"'}),"text/jsx",(0,e.jsx)(n.span,{className:"token punctuation",children:'"'})]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,e.jsx)(n.span,{className:"token script"}),(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:""})]}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"9",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:""})]}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"10",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),"body"]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"11",children:[" ",(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),"h1"]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),"Chat App",(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:""})]}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"12",children:[" ",(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),"div"]})," ",(0,e.jsx)(n.span,{className:"token attr-name",children:"id"}),(0,e.jsxs)(n.span,{className:"token attr-value",children:[(0,e.jsx)(n.span,{className:"token punctuation attr-equals",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:'"'}),"messages",(0,e.jsx)(n.span,{className:"token punctuation",children:'"'})]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:""})]}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"13",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:""})]}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"14",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:""})]}),` `]})]})}),` `,(0,e.jsx)(n.p,{children:"Nothing too interesting here. Just links to the resources and a flat folder structure for my files."}),` `,(0,e.jsxs)(n.h3,{id:"publicappjs",children:[(0,e.jsx)(n.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#publicappjs",children:(0,e.jsx)(n.span,{className:"icon icon-link"})}),"public/app.js"]}),` `,(0,e.jsx)(n.pre,{className:"language-javascript",children:(0,e.jsxs)(n.code,{className:"language-javascript code-highlight",children:[(0,e.jsxs)(n.span,{className:"code-line line-number",line:"1",children:[(0,e.jsx)(n.span,{className:"token comment",children:"// get a reference to the websocket"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"2",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"var"})," socket ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token function",children:"io"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsx)(n.span,{className:"code-line line-number",line:"3",children:` `}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"4",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"var"})," ",(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"MessageList"})," ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"React"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token method function property-access",children:"createClass"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"5",children:[" ",(0,e.jsx)(n.span,{className:"token function-variable function",children:"getInitialState"}),(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"function"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"6",children:[" ",(0,e.jsx)(n.span,{className:"token keyword control-flow",children:"return"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"7",children:[" ",(0,e.jsx)(n.span,{className:"token comment",children:"// initialize messages array with welcome message"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"8",children:[" ",(0,e.jsx)(n.span,{className:"token literal-property property",children:"messages"}),(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"["}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"9",children:[" ",(0,e.jsx)(n.span,{className:"token literal-property property",children:"timeStamp"}),(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token known-class-name class-name",children:"Date"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token method function property-access",children:"now"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"10",children:[" ",(0,e.jsx)(n.span,{className:"token literal-property property",children:"text"}),(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token string",children:'"Welcome to the test chat app!"'}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"11",children:[" ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"]"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"12",children:[" ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"13",children:[" ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"14",children:[" ",(0,e.jsx)(n.span,{className:"token function-variable function",children:"componentDidMount"}),(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"function"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"15",children:[" ",(0,e.jsx)(n.span,{className:"token comment",children:"// register event handler for new messages received from server"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"16",children:[" socket",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token method function property-access",children:"on"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token string",children:"'messageAdded'"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"this"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token property-access",children:"onMessageAdded"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"17",children:[" ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"18",children:[" ",(0,e.jsx)(n.span,{className:"token function-variable function",children:"onMessageAdded"}),(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"function"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token parameter",children:"message"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"19",children:[" ",(0,e.jsx)(n.span,{className:"token comment",children:"// update the array (setState re-renders the component)"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"20",children:[" ",(0,e.jsx)(n.span,{className:"token keyword",children:"this"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token method function property-access",children:"setState"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),(0,e.jsx)(n.span,{className:"token literal-property property",children:"messages"}),(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"this"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token property-access",children:"state"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token property-access",children:"messages"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token method function property-access",children:"concat"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),"message",(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"21",children:[" ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"22",children:[" ",(0,e.jsx)(n.span,{className:"token function-variable function",children:"postIt"}),(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"function"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token parameter",children:"e"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"23",children:[" ",(0,e.jsx)(n.span,{className:"token comment",children:"// prevent form submission which reloads the page"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"24",children:[" e",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token method function property-access",children:"preventDefault"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsx)(n.span,{className:"code-line line-number",line:"25",children:` `}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"26",children:[" ",(0,e.jsx)(n.span,{className:"token comment",children:"// get the message"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"27",children:[" ",(0,e.jsx)(n.span,{className:"token keyword",children:"var"})," input ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"React"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token method function property-access",children:"findDOMNode"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token keyword",children:"this"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token property-access",children:"refs"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token property-access",children:"theForm"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token property-access",children:"children"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"["}),(0,e.jsx)(n.span,{className:"token number",children:"0"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"]"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"28",children:[" ",(0,e.jsx)(n.span,{className:"token keyword",children:"var"})," message ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"29",children:[" ",(0,e.jsx)(n.span,{className:"token literal-property property",children:"timeStamp"}),(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token known-class-name class-name",children:"Date"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token method function property-access",children:"now"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"30",children:[" ",(0,e.jsx)(n.span,{className:"token literal-property property",children:"text"}),(0,e.jsx)(n.span,{className:"token operator",children:":"})," input",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token property-access",children:"value"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"31",children:[" ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsx)(n.span,{className:"code-line line-number",line:"32",children:` `}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"33",children:[" ",(0,e.jsx)(n.span,{className:"token comment",children:"// add it locally for this client"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"34",children:[" ",(0,e.jsx)(n.span,{className:"token keyword",children:"this"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token method function property-access",children:"setState"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),(0,e.jsx)(n.span,{className:"token literal-property property",children:"messages"}),(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"this"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token property-access",children:"state"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token property-access",children:"messages"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token method function property-access",children:"concat"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),"message",(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"35",children:[" ",(0,e.jsx)(n.span,{className:"token doc-comment comment",children:`/** `})]}),(0,e.jsx)(n.span,{className:"code-line line-number",line:"36",children:(0,e.jsx)(n.span,{className:"token doc-comment comment",children:` * Alternatively you could have the server emit to ALL clients, `})}),(0,e.jsx)(n.span,{className:"code-line line-number",line:"37",children:(0,e.jsx)(n.span,{className:"token doc-comment comment",children:` * including the one who sent the message. In that case the message `})}),(0,e.jsx)(n.span,{className:"code-line line-number",line:"38",children:(0,e.jsx)(n.span,{className:"token doc-comment comment",children:` * would go from your client to the server and back before it got added `})}),(0,e.jsx)(n.span,{className:"code-line line-number",line:"39",children:(0,e.jsx)(n.span,{className:"token doc-comment comment",children:` * to the message list. `})}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"40",children:[(0,e.jsx)(n.span,{className:"token doc-comment comment",children:" */"}),` `]}),(0,e.jsx)(n.span,{className:"code-line line-number",line:"41",children:` `}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"42",children:[" ",(0,e.jsx)(n.span,{className:"token comment",children:"// clear the input"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"43",children:[" input",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token property-access",children:"value"})," ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token string",children:"''"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsx)(n.span,{className:"code-line line-number",line:"44",children:` `}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"45",children:[" ",(0,e.jsx)(n.span,{className:"token comment",children:"// emit to server so other clients can be updated"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"46",children:[" socket",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token method function property-access",children:"emit"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token string",children:"'messageAdded'"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","})," message",(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"47",children:[" ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"48",children:[" ",(0,e.jsx)(n.span,{className:"token function-variable function",children:"render"}),(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"function"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"49",children:[" ",(0,e.jsx)(n.span,{className:"token keyword control-flow",children:"return"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"50",children:[" ",(0,e.jsx)(n.span,{className:"token operator",children:"<"}),"div",(0,e.jsx)(n.span,{className:"token operator",children:">"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"51",children:[" ",(0,e.jsx)(n.span,{className:"token operator",children:"<"}),"h2",(0,e.jsx)(n.span,{className:"token operator",children:">"}),(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"Messages"}),(0,e.jsx)(n.span,{className:"token operator",children:"<"}),(0,e.jsx)(n.span,{className:"token operator",children:"/"}),"h2",(0,e.jsx)(n.span,{className:"token operator",children:">"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"52",children:[" ",(0,e.jsx)(n.span,{className:"token operator",children:"<"}),"ul className",(0,e.jsx)(n.span,{className:"token operator",children:"="}),(0,e.jsx)(n.span,{className:"token string",children:'"message-list"'}),(0,e.jsx)(n.span,{className:"token operator",children:">"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"53",children:[" ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),(0,e.jsx)(n.span,{className:"token comment",children:"/* Create array of li's by looping over the messages array */"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"54",children:[" ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),(0,e.jsx)(n.span,{className:"token keyword",children:"this"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token property-access",children:"state"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token property-access",children:"messages"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token method function property-access",children:"map"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token keyword",children:"function"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token parameter",children:"message"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"55",children:[" ",(0,e.jsx)(n.span,{className:"token keyword control-flow",children:"return"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"56",children:[" ",(0,e.jsx)(n.span,{className:"token operator",children:"<"}),"li key",(0,e.jsx)(n.span,{className:"token operator",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),"message",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token property-access",children:"timeStamp"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token operator",children:">"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),"message",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token property-access",children:"text"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token operator",children:"<"}),(0,e.jsx)(n.span,{className:"token operator",children:"/"}),"li",(0,e.jsx)(n.span,{className:"token operator",children:">"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"57",children:[" ",(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"58",children:[" ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"59",children:[" ",(0,e.jsx)(n.span,{className:"token operator",children:"<"}),(0,e.jsx)(n.span,{className:"token operator",children:"/"}),"ul",(0,e.jsx)(n.span,{className:"token operator",children:">"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"60",children:[" ",(0,e.jsx)(n.span,{className:"token operator",children:"<"}),(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"MessageForm"})," submit",(0,e.jsx)(n.span,{className:"token operator",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),(0,e.jsx)(n.span,{className:"token keyword",children:"this"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token property-access",children:"postIt"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})," ref",(0,e.jsx)(n.span,{className:"token operator",children:"="}),(0,e.jsx)(n.span,{className:"token string",children:'"theForm"'})," ",(0,e.jsx)(n.span,{className:"token operator",children:"/"}),(0,e.jsx)(n.span,{className:"token operator",children:">"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"61",children:[" ",(0,e.jsx)(n.span,{className:"token operator",children:"<"}),(0,e.jsx)(n.span,{className:"token operator",children:"/"}),"div",(0,e.jsx)(n.span,{className:"token operator",children:">"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"62",children:[" ",(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"63",children:[" ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"64",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsx)(n.span,{className:"code-line line-number",line:"65",children:` `}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"66",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"var"})," ",(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"MessageForm"})," ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"React"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token method function property-access",children:"createClass"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"67",children:[" ",(0,e.jsx)(n.span,{className:"token function-variable function",children:"render"}),(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"function"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"68",children:[" ",(0,e.jsx)(n.span,{className:"token keyword control-flow",children:"return"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"69",children:[" ",(0,e.jsx)(n.span,{className:"token operator",children:"<"}),"form onSubmit",(0,e.jsx)(n.span,{className:"token operator",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),(0,e.jsx)(n.span,{className:"token keyword",children:"this"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token property-access",children:"props"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token property-access",children:"submit"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token operator",children:">"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"70",children:[" ",(0,e.jsx)(n.span,{className:"token operator",children:"<"}),"input type",(0,e.jsx)(n.span,{className:"token operator",children:"="}),(0,e.jsx)(n.span,{className:"token string",children:'"text"'})," size",(0,e.jsx)(n.span,{className:"token operator",children:"="}),(0,e.jsx)(n.span,{className:"token string",children:'"40"'})," placeholder",(0,e.jsx)(n.span,{className:"token operator",children:"="}),(0,e.jsx)(n.span,{className:"token string",children:'"Type your message here"'})," ",(0,e.jsx)(n.span,{className:"token operator",children:"/"}),(0,e.jsx)(n.span,{className:"token operator",children:">"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"71",children:[" ",(0,e.jsx)(n.span,{className:"token operator",children:"<"}),"button",(0,e.jsx)(n.span,{className:"token operator",children:">"}),(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"Post"})," it",(0,e.jsx)(n.span,{className:"token operator",children:"!"}),(0,e.jsx)(n.span,{className:"token operator",children:"<"}),(0,e.jsx)(n.span,{className:"token operator",children:"/"}),"button",(0,e.jsx)(n.span,{className:"token operator",children:">"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"72",children:[" ",(0,e.jsx)(n.span,{className:"token operator",children:"<"}),(0,e.jsx)(n.span,{className:"token operator",children:"/"}),"form",(0,e.jsx)(n.span,{className:"token operator",children:">"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"73",children:[" ",(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"74",children:[" ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"75",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsx)(n.span,{className:"code-line line-number",line:"76",children:` `}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"77",children:[(0,e.jsx)(n.span,{className:"token comment",children:"// mount to the messages div"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"78",children:[(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"React"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token method function property-access",children:"render"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token operator",children:"<"}),(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"MessageList"})," ",(0,e.jsx)(n.span,{className:"token operator",children:"/"}),(0,e.jsx)(n.span,{className:"token operator",children:">"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,e.jsx)(n.span,{className:"token dom variable",children:"document"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token method function property-access",children:"getElementById"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token string",children:"'messages'"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]})]})}),` `,(0,e.jsx)(n.p,{children:"Here I've defined a MessageList component which displays\xA0an unordered list of messages, followed by the MessageForm component which contains a simple form for posting a new message. MessageForm is nested inside of MessageList. At the bottom we render it by mounting\xA0the parent component to the messages div in our HTML."}),` `,(0,e.jsxs)(n.p,{children:["MessageList owns the array of chat messages, so MessageForm cannot modify it directly. Because of this we have to pass control of the submit handler up the chain to the parent which has access to the messages array. Note that this is done by ",(0,e.jsx)("a",{href:"https://facebook.github.io/react/tips/communicate-between-components.html",target:"_blank",children:"passing properties"}),`. When we call the MessageForm component inside the render function of MessageList, we pass it a custom property ("submit") and assign that property a local function ("postIt") which handles the form submission and adds the new message to the array. In the MessageForm component's render function we access\xA0the "submit" property we assigned to it above using `,(0,e.jsx)(n.code,{children:"this.props.submit"}),". That property (which now\xA0points to a handler function on the parent component)\xA0is then assigned to the component's ",(0,e.jsx)(n.code,{children:"onSubmit"})," event so that it gets called when the form is submitted."]}),` `,(0,e.jsx)(n.p,{children:"This is\xA0the point I mentioned above. It seems like this could quickly get very convoluted if you have many levels of nesting. But that's how you pass things up or down the chain in React."}),` `,(0,e.jsxs)(n.h3,{id:"serverjs",children:[(0,e.jsx)(n.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#serverjs",children:(0,e.jsx)(n.span,{className:"icon icon-link"})}),"server.js"]}),` `,(0,e.jsx)(n.pre,{className:"language-javascript",children:(0,e.jsxs)(n.code,{className:"language-javascript code-highlight",children:[(0,e.jsxs)(n.span,{className:"code-line line-number",line:"1",children:[(0,e.jsx)(n.span,{className:"token comment",children:"// define vars"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"2",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"var"})," express ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token function",children:"require"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token string",children:"'express'"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"3",children:[" app ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token function",children:"express"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"4",children:[" http ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token function",children:"require"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token string",children:"'http'"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token method function property-access",children:(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"Server"})}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),"app",(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"5",children:[" io ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token function",children:"require"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token string",children:"'socket.io'"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),"http",(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsx)(n.span,{className:"code-line line-number",line:"6",children:` `}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"7",children:[(0,e.jsx)(n.span,{className:"token comment",children:"// define routes"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"8",children:["app",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token method function property-access",children:"use"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token string",children:"'/'"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","})," express",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token method function property-access",children:"static"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),"__dirname ",(0,e.jsx)(n.span,{className:"token operator",children:"+"})," ",(0,e.jsx)(n.span,{className:"token string",children:"'/public'"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"9",children:["app",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token method function property-access",children:"use"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token string",children:"'/bower_components'"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","})," express",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token method function property-access",children:"static"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),"__dirname ",(0,e.jsx)(n.span,{className:"token operator",children:"+"})," ",(0,e.jsx)(n.span,{className:"token string",children:"'/bower_components'"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsx)(n.span,{className:"code-line line-number",line:"10",children:` `}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"11",children:[(0,e.jsx)(n.span,{className:"token comment",children:"// server events"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"12",children:["io",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token method function property-access",children:"on"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token string",children:"'connection'"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"function"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token parameter",children:"socket"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"13",children:[" ",(0,e.jsx)(n.span,{className:"token console class-name",children:"console"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token method function property-access",children:"log"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token string",children:"'a user connected'"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"14",children:[" socket",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token method function property-access",children:"on"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token string",children:"'disconnect'"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"function"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"15",children:[" ",(0,e.jsx)(n.span,{className:"token console class-name",children:"console"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token method function property-access",children:"log"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token string",children:"'a user disconnected'"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"16",children:[" ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"17",children:[" socket",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token method function property-access",children:"on"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token string",children:"'messageAdded'"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"function"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token parameter",children:"message"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"18",children:[" ",(0,e.jsx)(n.span,{className:"token comment",children:"// io.emit('messageAdded', message); // broadcast to all clients"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"19",children:[" socket",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token property-access",children:"broadcast"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token method function property-access",children:"emit"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token string",children:"'messageAdded'"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","})," message",(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"})," ",(0,e.jsx)(n.span,{className:"token comment",children:"// broadcast to all but the sender"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"20",children:[" ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"21",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),` `]}),(0,e.jsx)(n.span,{className:"code-line line-number",line:"22",children:` `}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"23",children:["http",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token method function property-access",children:"listen"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token number",children:"3000"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"function"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"24",children:[" ",(0,e.jsx)(n.span,{className:"token console class-name",children:"console"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token method function property-access",children:"log"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token string",children:"'listening on: 3000'"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"25",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]})]})}),` `,(0,e.jsxs)(n.p,{children:["The server code creates an http server using Node and some simple routes using Express. Our document root is mapped to\xA0",(0,e.jsx)(n.code,{children:"/public"})," and the client libraries are served from\xA0",(0,e.jsx)(n.code,{children:"/bower_components"}),'. When Socket.io receives a "connection" event, a new client has connected to the server. We register a callback function for that event, and inside that function we handle other events such as the custom "messageAdded" event that gets emitted from a client when the user adds a message. The server then broadcasts that event out to all the other clients so they stay in sync.']}),` `,(0,e.jsxs)(n.h2,{id:"try-it-out",children:[(0,e.jsx)(n.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#try-it-out",children:(0,e.jsx)(n.span,{className:"icon icon-link"})}),"Try It Out"]}),` `,(0,e.jsx)(n.p,{children:"To get up and running with this code:"}),` `,(0,e.jsxs)(n.ul,{children:[` `,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:"",children:"Download the files here"})}),` `,(0,e.jsx)(n.li,{children:"Open up your project folder in the terminal"}),` `,(0,e.jsxs)(n.li,{children:["Install the server libraries: ",(0,e.jsx)(n.code,{children:"npm install"})]}),` `,(0,e.jsxs)(n.li,{children:["Install the client libraries: ",(0,e.jsx)(n.code,{children:"bower install"})]}),` `,(0,e.jsxs)(n.li,{children:["Start up your server: ",(0,e.jsx)(n.code,{children:"node server.js"})]}),` `,(0,e.jsxs)(n.li,{children:["Open up\xA0",(0,e.jsx)("a",{href:"http://localhost:3000/",target:"_blank",children:"http://localhost:3000/"})," in two browser windows and chat!"]}),` `]}),` `,(0,e.jsxs)(n.h2,{id:"final-thoughts",children:[(0,e.jsx)(n.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#final-thoughts",children:(0,e.jsx)(n.span,{className:"icon icon-link"})}),"Final Thoughts"]}),` `,(0,e.jsx)(n.p,{children:"One thing about learning new stuff is that new technologies are often so interrelated that it\u2019s difficult to learn one thing in isolation. This is especially true of JavaScript nowadays as the trend seems to be towards small libraries that you can swap in for added functionality vs. large frameworks that do everything. It can be frustrating when you just want to try out\xA0some new library, but you quickly find out that you have to be familiar with several other things to even get started. That was my experience with React. I had to spend a little time figuring out Node.js, Express, Bower, etc. too. The upside of that trend is that you have lots of choices and you can build your custom stack however you want."}),` `,(0,e.jsx)(n.p,{children:"Next step is to convert one of my existing apps to use React and Socket.io to provide real-time data. I\u2019ll probably need to investigate MongoDB or some other noSQL database to finish it off."})]})}function d(a={}){let{wrapper:n}=a.components||{};return n?(0,e.jsx)(n,{...a,children:(0,e.jsx)(p,{...a})}):p(a)}return f(v);})(); ;return Component;

Posts tagged with "socket.io"

Simple chat application using React and Socket.io