| <!-- |
| Licensed to the Apache Software Foundation (ASF) under one or more |
| contributor license agreements. See the NOTICE file distributed with |
| this work for additional information regarding copyright ownership. |
| The ASF licenses this file to You under the Apache License, Version 2.0 |
| (the "License"); you may not use this file except in compliance with |
| the License. You may obtain a copy of the License at |
| |
| http://www.apache.org/licenses/LICENSE-2.0 |
| |
| Unless required by applicable law or agreed to in writing, software |
| distributed under the License is distributed on an "AS IS" BASIS, |
| WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
| See the License for the specific language governing permissions and |
| limitations under the License. |
| --> |
| |
| <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> |
| <html> |
| <head> |
| <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> |
| <title>Chat Example - ActiveMQ Web Demos</title> |
| <link rel="stylesheet" href="chat.css" type="text/css"> |
| <style type="text/css" media="screen"> |
| @import url(styles/sorttable.css); |
| @import url(styles/type-settings.css); |
| @import url(styles/site.css); |
| @import url(styles/prettify.css); |
| </style> |
| |
| <!--<script type="text/javascript" src="js/prototype.js"></script>--> |
| <!--<script type="text/javascript" src="js/amq_prototype_adapter.js"></script>--> |
| <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script> |
| <script type="text/javascript" src="js/amq_jquery_adapter.js"></script> |
| |
| <script type="text/javascript" src="js/amq.js"></script> |
| <script type="text/javascript" src="js/chat.js"></script> |
| <script type="text/javascript"> |
| |
| // Note, normally you wouldn't just add an onload function in this |
| // manner. In fact, you typically want to fire this method on the |
| // document.onready event, however this type of functionality is verbose |
| // and best left to the domain of your favorite js library. |
| // |
| // For example, in jQuery the following onload would be replaced with: |
| // jQuery(function() { |
| // org.activemq.Amq.init({ uri: 'amq' }); |
| // org.activemq.Chat.init(); |
| // } |
| window.onload = function() { |
| org.activemq.Amq.init({ uri: 'amq', logging: true, timeout: 45, clientId:(new Date()).getTime().toString() }); |
| org.activemq.Chat.init(); |
| }; |
| </script> |
| |
| </head> |
| |
| <body> |
| |
| |
| <div class="white_box"> |
| <div class="header"> |
| <div class="header_l"> |
| <div class="header_r"> |
| </div> |
| </div> |
| </div> |
| <div class="content"> |
| <div class="content_l"> |
| <div class="content_r"> |
| |
| <div> |
| |
| <!-- Banner --> |
| <div id="asf_logo"> |
| <div id="activemq_logo"> |
| <a style="float:left; width:280px;display:block;text-indent:-5000px;text-decoration:none;line-height:60px; margin-top:10px; margin-left:100px;" |
| href="http://activemq.apache.org/" |
| title="The most popular and powerful open source Message Broker">ActiveMQ</a> |
| <a style="float:right; width:210px;display:block;text-indent:-5000px;text-decoration:none;line-height:60px; margin-top:15px; margin-right:10px;" |
| href="http://www.apache.org/" title="The Apache Software Foundation">ASF</a> |
| </div> |
| </div> |
| |
| |
| <div class="top_red_bar"> |
| <div id="site-breadcrumbs"> |
| <a href="index.html" title="Home">Home</a> |
| </div> |
| <div id="site-quicklinks"><P> |
| <a href="http://activemq.apache.org/support.html" |
| title="Get help and support using Apache ActiveMQ">Support</a></p> |
| </div> |
| </div> |
| |
| <table border="0"> |
| <tbody> |
| <tr> |
| <td valign="top" width="100%" style="overflow:hidden;"> |
| <div class="body-content"> |
| |
| <h1>Chat Example</h1> |
| |
| <p>Welcome to the Ajax chat example</p> |
| |
| <div id="chatroom"> |
| <div id="chat"></div> |
| |
| <div id="members"></div> |
| |
| <div id="input"> |
| <div id="join" class="hidden"> |
| Username: |
| <input id="username" type="text"/> |
| <button id="joinB">Join</button> |
| </div> |
| <div id="joined" class="hidden"> |
| Chat: |
| <input id="phrase" type="text" /> |
| <button id="sendB">Send</button> |
| <button id="leaveB">Leave</button> |
| </div> |
| </div> |
| </div> |
| |
| <p> |
| This Chat example creates an ActiveMQ broker using the configuration |
| information found in the <code>web.xml</code> file. There isn't much there. |
| Just a name-value parameter named <code>org.apache.activemq.brokerURL</code> |
| is assigned a value of <code>vm://localhost?broker.persistent=false</code>. |
| This is enough however to lazy-initialize the broker when it is needed. |
| </p> |
| <p> |
| The client leverages a javascript library <code>amq.js</code> to perform all |
| of the JMS-related client side code. This involves establishing a |
| communication pipeline to the JMS server. This pipeline uses a long-poll |
| connection to the server. All JMS communication will be received down this |
| pipe, and when the JMS server has no traffic to send, this pipeline will |
| patiently wait until there is new traffic or until it times out. If a |
| timeout does occur, the connection will reconnect to the server for another |
| round. (Of course you will want/need to use a server that supports |
| continuations in order for this to scale beyond a few hundred clients.) |
| </p> |
| <p> |
| The <code>chat.js</code> file contains the script to respond to the UI |
| interactions. It also talks to the <code>amq.js</code> file to send messages |
| and provides a message handler that will respond to incoming JMS messages. |
| </p> |
| <p> |
| There is no server-side state in this application. The client sets up a JMS |
| Topic on the server and attaches itself as a listener to this topic. From |
| that point, all messages that are sent to the topic are received by each |
| listener. Even the list of members in the chat room are the result of |
| clients replying to a ping request. |
| </p> |
| <p> |
| Please note that <code>amq.js</code> has been refactored to allow AJAX calls |
| to be made using any javascript library. Example adapter classes for <a href="http://jquery.com/">jQuery</a> |
| and <a href="http://www.prototypejs.org/">Prototype</a> have been provided. |
| </p> |
| |
| |
| </div> |
| </td> |
| <td valign="top"> |
| |
| <div class="navigation"> |
| <div class="navigation_top"> |
| <div class="navigation_bottom"> |
| <H3>Useful Links</H3> |
| |
| <ul class="alternate" type="square"> |
| <li><a href="http://activemq.apache.org/" |
| title="The most popular and powerful open source Message Broker">Documentation</a></li> |
| <li><a href="http://activemq.apache.org/faq.html">FAQ</a></li> |
| <li><a href="http://activemq.apache.org/download.html">Downloads</a> |
| </li> |
| <li><a href="http://activemq.apache.org/discussion-forums.html">Forums</a> |
| </li> |
| </ul> |
| </div> |
| </div> |
| </div> |
| </td> |
| </tr> |
| </tbody> |
| </table> |
| |
| |
| <div class="bottom_red_bar"></div> |
| </div> |
| </div> |
| </div> |
| </div> |
| <div class="black_box"> |
| <div class="footer"> |
| <div class="footer_l"> |
| <div class="footer_r"> |
| <div> |
| Copyright 2005-2012 The Apache Software Foundation. |
| |
| (<a href="?printable=true">printable version</a>) |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| <div class="design_attribution"><a href="http://hiramchirino.com/">Graphic Design By Hiram</a></div> |
| |
| </body> |
| </html> |
