Recently, the people who brought you the excellent imified service, for creating IM bots, brought out phono, a simple JQuery interface to phone and IM services. Using Phono, you can create a simple front-end to an IMIFIED bot. The following code does this; you will need to replace the string MYBOT@bot.im with the address of your own bot, and you will need a free API key from phono to make this work.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <title>Live chat example</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="robots" content="All" /> <meta name="copyright" content="University of Wolverhampton" /> <link id="theme" rel="stylesheet" type="text/css" href="/css/style.css" title="theme" /> <style type="text/css"> form { width: 700px; color: #3E4A49; background-color: #EEEEEE; padding: 20px; margin: 20px; } fieldset { padding: 0 20px 20px; margin: 0 0 20px; border: 1px solid #3E4A49; } legend { color: #FFFFFF; background-color: #444444; font-weight: bold; padding: 5px; margin-bottom: 0; width: 200px; border: 1px solid #3E4A49; } label { display: block; float: left; text-align: right; width: 100px; font-weight: bold; margin-right: 10px; } #buttons { text-align: right; margin: -15px 0 -5px 0; } input.button { width: auto; background: #FFFFFF; border: 2px solid #4899BE; } textarea:focus, input:focus { border: 2px solid #9b251b; } .throbber { width: 100%; text-align: center; margin-top: 50px; } .throbber img { text-align: center; } </style> <script type="text/javascript" language="javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script> <script type="text/javascript" language="javascript" src="http://s.phono.com/releases/0.1/jquery.phono.js"></script> <script type="text/javascript"> $(document).ready(function() { var myPhono = $.phono({ onReady: function() { $("#sendChat").attr("disabled", false); $("#loader").hide(); $("#chat").fadeIn(2000); }, messaging: { onMessage: function(event) { // Get message from event and log it var message = event.message; appendChat("\Chatbot:" + message.body); } }, }); // end .phono $('#sendChat').click(function() { var msg = $('#chatText').val(); if (msg.length == 0) { return; } appendChat("\nYou: " + msg); myPhono.messaging.send("MYBOT@bot.im", msg); }); $('form').submit(function () { return false; }); function appendChat(msg) { // Append msg and scroll chat history. var history = $('#chatHistory'); history.append(msg); // If the text does not fit in the text box, scroll up. history.animate({ scrollTop: history.height() }, 1000); // Clear input box. $('#chatText').val(''); }; }); // end ready </script> </head> <body> <div class="throbber" id="loader"> <img src="images/spinner.gif"/> </div> <div id="chat" style="display:none"> <form id="chatForm"> <fieldset> <legend>My chatbot is <span style="color:rgb(0, 255, 0);">ONLINE</span></legend> <p><textarea cols="70" rows="20" name="messages" id="chatHistory" title="Live chat"></textarea><p/> <p><input type="text" size="50%" name="message" id="chatText"/> <input type="submit" disabled="true" value="Chat" name="send" id="sendChat"/></p> </fieldset> </form> </div> </body> </html> |
No comments:
Post a Comment