'"})," ",(0,e.jsx)(n.span,{className:"token operator",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 operator",children:"+"})," ",(0,e.jsx)(n.span,{className:"token string",children:"'

'"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"26",children:[" ",(0,e.jsx)(n.span,{className:"token function",children:"$"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token string",children:"'.message-list'"}),(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:"append"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),"li",(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:"27",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),` `]}),(0,e.jsx)(n.span,{className:"code-line line-number",line:"28",children:` `}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"29",children:[(0,e.jsx)(n.span,{className:"token comment",children:"// attach onSubmit handler to the form"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"30",children:[(0,e.jsx)(n.span,{className:"token function",children:"$"}),(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:"31",children:[" ",(0,e.jsx)(n.span,{className:"token function",children:"$"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token string",children:"'.message-form'"}),(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:"on"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token string",children:"'submit'"}),(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:"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:"32",children:[" ",(0,e.jsx)(n.span,{className:"token comment",children:"// prevent form submission which causes page reload"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"33",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:"34",children:` `}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"35",children:[" ",(0,e.jsx)(n.span,{className:"token comment",children:"// get the input"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"36",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 function",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 punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token method function property-access",children:"find"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token string",children:"'input'"}),(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:"37",children:` `}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"38",children:[" ",(0,e.jsx)(n.span,{className:"token comment",children:"// get message text from the input"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"39",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:"40",children:[" ",(0,e.jsx)(n.span,{className:"token literal-property property",children:"type"}),(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token string",children:"'message'"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"41",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 method function property-access",children:"val"}),(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:"42",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:"43",children:` `}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"44",children:[" ",(0,e.jsx)(n.span,{className:"token comment",children:"// clear the input"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"45",children:[" input",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token method function property-access",children:"val"}),(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:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsx)(n.span,{className:"code-line line-number",line:"46",children:` `}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"47",children:[" ",(0,e.jsx)(n.span,{className:"token comment",children:"// send message to server"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"48",children:[" conn",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token method function property-access",children:"send"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token known-class-name class-name",children:"JSON"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token method function property-access",children:"stringify"}),(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.jsxs)(n.span,{className:"code-line line-number",line:"49",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:"50",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:["This code runs in the client browser and allows it to connect to the socket server and send and receive messages.\xA0",(0,e.jsx)("a",{href:"http://www.w3.org/TR/websockets/#the-websocket-interface",target:"_blank",children:"The W3C WebSocket API"}),"\xA0exposes the same 4 events that we saw\xA0in our server code, and we define a callback function to handle each one. ",(0,e.jsx)(n.strong,{children:"Note that these event names\xA0are all lower-case though."})]}),` `,(0,e.jsxs)(n.p,{children:["The ",(0,e.jsx)(n.code,{children:"onopen"})," event fires when our client connects to the socket server. We log a message to the browser's console."]}),` `,(0,e.jsxs)(n.p,{children:["The ",(0,e.jsx)(n.code,{children:"onerror"})," event fires when we have a connection error."]}),` `,(0,e.jsxs)(n.p,{children:["The ",(0,e.jsx)(n.code,{children:"onclose"})," event fires when our client closes its connection to the socket server."]}),` `,(0,e.jsxs)(n.p,{children:["The ",(0,e.jsx)(n.code,{children:"onmessage"}),` event fires when the client\xA0receives a message from the socket server. Each of these callbacks receives an\xA0event object as an argument (I assigned to the variable "e"). The actual payload of the message is contained in the event object's "data" property. Here we grab the message, log it to the console, and then append it to the unordered list using jQuery.`]}),` `,(0,e.jsx)(n.p,{children:'The last piece of code uses jQuery to add an event handler to the message form. When we submit that form, we want the client to send the message we typed to the socket server. Here we grab the value of the text input,\xA0create a message object, clear the input, and then send the message to the server. This action will fire an "onMessage" event on the server, which will respond by sending that message out to all the connected clients as we saw in the server code earlier.'}),` `,(0,e.jsxs)(n.h2,{id:"running-the-app",children:[(0,e.jsx)(n.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#running-the-app",children:(0,e.jsx)(n.span,{className:"icon icon-link"})}),"Running the app"]}),` `,(0,e.jsxs)(n.p,{children:[(0,e.jsx)(n.a,{href:"",children:"Download the files here"}),"."]}),` `,(0,e.jsx)(n.p,{children:"To run the app you'll need to install the PHP libraries on your server. Composer will handle that for you. Open a shell terminal on your server, navigate to the project directory and type:"}),` `,(0,e.jsx)(n.pre,{className:"language-shell",children:(0,e.jsx)(n.code,{className:"language-shell code-highlight",children:(0,e.jsxs)(n.span,{className:"code-line line-number",line:"1",children:[(0,e.jsx)(n.span,{className:"token function",children:"composer"})," ",(0,e.jsx)(n.span,{className:"token function",children:"install"}),` `]})})}),` `,(0,e.jsx)(n.p,{children:"If you're using the Bower file for the client libraries, type:"}),` `,(0,e.jsx)(n.pre,{className:"language-shell",children:(0,e.jsx)(n.code,{className:"language-shell code-highlight",children:(0,e.jsxs)(n.span,{className:"code-line line-number",line:"1",children:["bower ",(0,e.jsx)(n.span,{className:"token function",children:"install"}),` `]})})}),` `,(0,e.jsx)(n.p,{children:"Then start up the web socket server we created which will listen for message events:"}),` `,(0,e.jsx)(n.pre,{className:"language-shell",children:(0,e.jsx)(n.code,{className:"language-shell code-highlight",children:(0,e.jsx)(n.span,{className:"code-line line-number",line:"1",children:`php bin/server.php `})})}),` `,(0,e.jsx)(n.p,{children:"That will run the\xA0socket server code which will start listening for connections and events on port 8080. Then open up two browser windows and point them to wherever you're hosting the project and start chatting!"})]})}function h(a={}){let{wrapper:n}=a.components||{};return n?(0,e.jsx)(n,{...a,children:(0,e.jsx)(p,{...a})}):p(a)}return w(y);})(); ;return Component;

Posts tagged with "ratchet"

Simple chat application in PHP using Ratchet