Created
May 24, 2013 04:58
-
-
Save RudyLu/5641350 to your computer and use it in GitHub Desktop.
The sample code of using Strophe.js to connect to facebook chat
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <script src="http://connect.facebook.net/en_US/all.js" type="text/javascript"></script> | |
| <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script> | |
| <script src="strophe-102.js" type="text/javascript"></script> | |
| <script src="facebook.js" type="text/javascript"></script> | |
| <script> | |
| var BOSH_SERVICE = 'http://island.csie.org:8273/xmpp-httpbind' | |
| var connection = null; | |
| function log(msg) | |
| { | |
| $('#log').append('<div></div>').append(document.createTextNode(msg)); | |
| } | |
| function rawInput(data) | |
| { | |
| log('RECV: ' + data); | |
| } | |
| function rawOutput(data) | |
| { | |
| log('SENT: ' + data); | |
| } | |
| function onConnect(status) | |
| { | |
| if (status == Strophe.Status.CONNECTING) { | |
| log('Strophe is connecting.'); | |
| } else if (status == Strophe.Status.CONNFAIL) { | |
| log('Strophe failed to connect.'); | |
| $('#connect').get(0).value = 'connect'; | |
| } else if (status == Strophe.Status.DISCONNECTING) { | |
| log('Strophe is disconnecting.'); | |
| } else if (status == Strophe.Status.DISCONNECTED) { | |
| log('Strophe is disconnected.'); | |
| $('#connect').get(0).value = 'connect'; | |
| } else if (status == Strophe.Status.CONNECTED) { | |
| log('Strophe is connected.'); | |
| //connection.disconnect(); | |
| log('ECHOBOT: Send a message to ' + connection.jid + | |
| ' to talk to me.'); | |
| connection.addHandler(onMessage, null, 'message', null, null, null); | |
| connection.addHandler(onOwnMessage, null, 'iq', 'set', null, null); | |
| connection.send($pres().tree()); | |
| } | |
| } | |
| function onOwnMessage(msg) { | |
| console.log(msg); | |
| var elems = msg.getElementsByTagName('own-message'); | |
| if (elems.length > 0) { | |
| var own = elems[0]; | |
| var to = msg.getAttribute('to'); | |
| var from = msg.getAttribute('from'); | |
| var iq = $iq({ | |
| to: from, | |
| type: 'error', | |
| id: msg.getAttribute('id') | |
| }).cnode(own).up().c('error', {type: 'cancel', code: '501'}) | |
| .c('feature-not-implemented', {xmlns: 'urn:ietf:params:xml:ns:xmpp-stanzas'}); | |
| connection.sendIQ(iq); | |
| } | |
| return true; | |
| } | |
| function onMessage(msg) { | |
| var to = msg.getAttribute('to'); | |
| var from = msg.getAttribute('from'); | |
| var type = msg.getAttribute('type'); | |
| var elems = msg.getElementsByTagName('body'); | |
| if (type == "chat" && elems.length > 0) { | |
| var body = elems[0]; | |
| log('ECHOBOT: I got a message from ' + from + ': ' + | |
| Strophe.getText(body)); | |
| var text = Strophe.getText(body) + " (this is echo)"; | |
| //var reply = $msg({to: from, from: to, type: 'chat', id: 'purple4dac25e4'}).c('active', {xmlns: "http://jabber.org/protocol/chatstates"}).up().cnode(body); | |
| //.cnode(Strophe.copyElement(body)); | |
| //connection.send(reply.tree()); | |
| log('ECHOBOT: I sent ' + from + ': ' + Strophe.getText(body)); | |
| } | |
| // we must return true to keep the handler alive. | |
| // returning false would remove it after it finishes. | |
| return true; | |
| } | |
| function sendMessage() { | |
| var message = $('#message').get(0).value; | |
| var to = $('#to').get(0).value; | |
| if(message && to){ | |
| var reply = $msg({ | |
| to: to, | |
| type: 'chat' | |
| }) | |
| .cnode(Strophe.xmlElement('body', message)).up() | |
| .c('active', {xmlns: "http://jabber.org/protocol/chatstates"}); | |
| connection.send(reply); | |
| log('I sent ' + to + ': ' + message); | |
| } | |
| } | |
| $(document).ready(function () { | |
| var access_token; | |
| FB.init({ | |
| appId : '444473912302176', | |
| status : true, | |
| cookie : true, | |
| xfbml : true, | |
| oauth : true, | |
| }); | |
| FB.login(function (response) { | |
| console.log(response); | |
| if (response.authResponse) { | |
| access_token = response.authResponse.accessToken; | |
| console.log(access_token); | |
| } else { | |
| alert('User is logged out'); | |
| } | |
| }, {scope: 'xmpp_login'}); | |
| connection = new Strophe.Connection(BOSH_SERVICE); | |
| connection.rawInput = rawInput; | |
| connection.rawOutput = rawOutput; | |
| $('#connect').bind('click', function () { | |
| var button = $('#connect').get(0); | |
| if (button.value == 'connect') { | |
| button.value = 'disconnect'; | |
| connection.facebookConnect($('#jid').get(0).value, | |
| onConnect, | |
| 300, | |
| 1, | |
| '444473912302176', //'345255002170399' , /*app id*/ | |
| '07d25239fe132888b219a7625e2f0f0c', //'098f4361f4d30f6c0e658b1a6d98319d',/*secret key*/ | |
| access_token); | |
| } else { | |
| button.value = 'connect'; | |
| connection.disconnect(); | |
| } | |
| }); | |
| $('#send').bind('click', function () { | |
| sendMessage(); | |
| }); | |
| }); | |
| </script> | |
| </head> | |
| <body> | |
| <div id="fb-root"></div> | |
| <div id='login' style='text-align: center'> | |
| <form name='cred'> | |
| <label for='jid'>JID:</label> | |
| <input type='text' id='jid'> | |
| <label for='pass'>Password:</label> | |
| <input type='password' id='pass'> | |
| <input type='button' id='connect' value='connect'> | |
| </form> | |
| <label for='to'> | |
| to: | |
| </label> | |
| <input type='text' id='to'> | |
| <label for='message'> | |
| message: | |
| </label> | |
| <input type='text' id='message'> | |
| <input type='button' id='send' value='send'> | |
| </div> | |
| <hr> | |
| <div id='log'></div> | |
| </body> | |
| </html> |
Can we have an answer to arashp please ?
This code is exactly what I am looking for but I can't have it working properly.
Many Thanks
A BOSH Connection Manager
Your website and strophe.js use HTTP as protocol to communicate with the webserver. HTTP connections are stateless and usually shortlived.
XMPP on the other hand, is the protocol that enables instant messaging, and its connections are stateful and usually longer.
To enable a web application like strophe.js to communicate with an XMPP server, we need a proxy in the middle that can act as a bridge between the two protocols.
Summary: you (MilesYM) need third part component for correct work
I am now beginning to implement the XMPP in my web application , I'm just having a hard time . I studied your code and decided to implement it just that I 'm not using to login with Facebook ID but with its own server , only after it shows the status 5 ( Strophe.Status.CONNECTED ) it disconnects me showing me one exception: undefined jid . I would like to help me , the service is delayed :( !
@danpadua check this demo https://github.com/arist1213/stropheHttpBindOpenfire
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Hi Rudy,
I am using this api. what is "http://island.csie.org:8273/xmpp-httpbind" ? do i need to replace this url with facebook endpoint? It seems when I run this code the post to above url doesnt succeed.
Arash