SlideShare una empresa de Scribd logo
1 de 123
The Real Time Web with XMPP
   an Introduction to Strophe.js




                               Jack Moffitt
                                 Collecta
What is XMPP?
eXtensible Messaging and
  Presence Protocol
Why XMPP?
HTTP APIs are great
HTTP polling sucks
Real time is different
XMPP basics
XMPP network
XMPP addressing
example.com
jack@example.com
jack@example.com/home
jack@example.com/work
jack@example.com/7a29d835f9c
XMPP protocol
XML
XML streams
XML stanzas
<message/>
<presence/>
<iq/>
<message/>
<message
    from=’juliet@book.lit/home’
    to=’romeo@book.lit’
    type=’chat’>
 <body>
  Wherefore art thou, Romeo?
 </body>
</message>
<message
    from=’juliet@book.lit/home’
    to=’romeo@book.lit’
    type=’chat’>
 <body>
  Wherefore art thou, Romeo?
 </body>
</message>
<message
    from=’juliet@book.lit/home’
    to=’romeo@book.lit’
    type=’chat’>
 <body>
  Wherefore art thou, Romeo?
 </body>
</message>
<message
    from=’juliet@book.lit/home’
    to=’romeo@book.lit’
    type=’chat’>
 <body>
  Wherefore art thou, Romeo?
 </body>
</message>
<message
   from=’juliet@book.lit/home’
   to=’romeo@book.lit’
   type=’chat’>
 <body>
  Wherefore art thou, Romeo?
 </body>
</message>
<presence/>
<presence
  type=‘away’>
 <show>away</show>
 <status>At JSConf 2009</status>
</presence>
<presence
    type=‘away’>
 <show>away</show>
 <status>At JSConf 2009</status>
</presence>
<presence
    type=‘away’>
 <show>away</show>
 <status>At JSConf 2009</status>
</presence>
<presence
    type=‘away’>
 <show>away</show>
 <status>At JSConf 2009</status>
</presence>
<iq/>
<iq
    to=‘book.lit’
    type=’get’
    id=’disco:1’>
 <query xmlns=’disco#info’/>
</iq>
<iq
    to=‘book.lit’
    type=’get’
    id=’disco:1’>
 <query xmlns=’disco#info’/>
</iq>
<iq
    to=‘book.lit’
    type=’get’
    id=’disco:1’>
 <query xmlns=’disco#info’/>
</iq>
<iq
    to=‘book.lit’
    type=’get’
    id=’disco:1’>
 <query xmlns=’disco#info’/>
</iq>
<iq
    to=‘book.lit’
    type=’get’
    id=’disco:1’>
 <query xmlns=’disco#info’/>
</iq>
<iq
    to=’romeo@book.lit/home’
    from=‘book.lit’
    type=’result’
    id=’disco:1’>
 <query xmlns=’disco#info’>
   <identity category='server' type='im'
    name='ejabberd'/>
   <feature var='vcard-temp'/>
 </query>
</iq>
<iq
    to=’romeo@book.lit/home’
    from=‘book.lit’
    type=’result’
    id=’disco:1’>
 <query xmlns=’disco#info’>
   <identity category='server' type='im'
    name='ejabberd'/>
   <feature var='vcard-temp'/>
 </query>
</iq>
<iq
    to=’romeo@book.lit/home’
    from=‘book.lit’
    type=’result’
    id=’disco:1’>
 <query xmlns=’disco#info’>
   <identity category='server' type='im'
    name='ejabberd'/>
   <feature var='vcard-temp'/>
 </query>
</iq>
<iq
    to=’romeo@book.lit/home’
    from=‘book.lit’
    type=’result’
    id=’disco:1’>
 <query xmlns=’disco#info’>
   <identity category='server'
    type='im'
    name='ejabberd'/>
   <feature var='vcard-temp'/>
 </query>
</iq>
XMPP and the Web
Sites using XMPP on the Web
BOSH

 Bidirectional streams
Over Synchronous Http
Long polling
Normal polling




 Long polling
What is Strophe?
XMPP client library
JavaScript
Real time Web applications
Fully documented
Highly optimized
Well tested
Built for Chesspark
StanzIQ and Speeqe
also used by
   Seesmic
  Yammer
Neuros OSD
First steps
Managing connections
Connecting
var connection =
new Strophe.Connection(URL);
connection.connect(
   jid,
   password,
   callback
);
user@domain

Strophe lets server
  assign resource
user@domain/resource

Strophe requests a specific
        resource
domain or domain/resource

    Strophe will try
  SASL ANONYMOUS
The connection callback
Strophe reports status
connecting
   authenticating
authentication failed
     connected
   disconnecting
   disconnected
function on_status(status) {
   if (status == Strophe.Status.CONNECTED) {
       // send initial presence
       // query for the roster
   }
}
Sending data
connection.send(xml);
Disconnecting
connection.disconnect();
All about events
Event driven
Interaction events
Timed events
Stanza events
Examples
User clicks send button

$(‘#send’).click(function () {
    // build message stanza
    // send message
});
Display incoming messages
Add a handler

connection.addHandler(
   on_message,
   null,
   “message”,
   “chat”
);
Respond to matched stanzas

function on_message(msg) {
   // extract message body
   // display text

    return true;
}
Dealing with IQ stanzas
Answering incoming IQs

connection.addHandler(
   on_iq_version,
   “jabber:iq:version”,
   “iq”,
   “get”
);
Getting responses

connection.addHandler(
   on_version,
   null,
   “iq”,
   null,
   “disco-1”
);
Timed handlers

connection.addTimedHandler(
   100,
   send_flood
);
Building stanzas
Strophe.Builder
Almost always returns
   Strophe.Builder
Allows function chaining
    just like jQuery
var stanza = new Strophe.Builder(
   “message”,
   {“to”: “someone@jabber.org”,
    “type”: “chat”}
);
Chainable methods
Adding a child

c(name, attrs)
Adding text content

  t(“some text”)
Adding pre-made children

    cnode(element)
Modifying attributes

 attrs(new_attrs)
Traversing the tree

       up()
Examples
new Strophe.Builder(
   “message”,
   {“to”: “someone@jabber.org”,
    “type”: “chat”}
).c(“body”).t(“Hello, World!”);
new Strophe.Builder(
    “message”,
    {“to”: “...”, “type”: “chat”}
).c(“body”).t(“Hi”)
.up()
.c(“html”,
   {“xmlns”: “.../xhtml-im”})
.c(“body”, ...)
.c(“p”).t(“Hi”)
Convenience functions
$pres(attrs)
$msg(attrs)
 $iq(attrs)
Send available presence

       $pres()
Build a message

$msg({“to”: “someone@jabber.org”,
      “type”: “chat”})
 .c(“body”).t(“XMPP rocks!”)
Unchainable methods
calling stanza.toString() produces

“<message to=‘someone@jabber.org’
          type=‘chat’/>”
stanza.tree() produces a DOM tree
Hello, Server!

 an application
Plugins!
Strophe.addNamespace(
  ‘XHTML_IM’,
  ‘http://jabber.org/protocol/xhtml-im’
);
Strophe.addConnectionPlugin(
  ‘myplugin’,
   {
     init: function (conn) { ... }
   }
);
Identi.ca microblogging
The Future
XPath matching with Strophe
conn.addHandler(
“/message[@from=‘you@foo.com’
  and @type=‘chat’]”,
 function (elem) {...});
The multi-session problem
http://code.stanziq.com/strophe

      http://metajack.im

      jack@collecta.com

Más contenido relacionado

La actualidad más candente

Symfony2 Components - The Event Dispatcher
Symfony2 Components - The Event DispatcherSymfony2 Components - The Event Dispatcher
Symfony2 Components - The Event Dispatcher
Sarah El-Atm
 
Ruby HTTP clients comparison
Ruby HTTP clients comparisonRuby HTTP clients comparison
Ruby HTTP clients comparison
Hiroshi Nakamura
 

La actualidad más candente (20)

JSON-RPC - JSON Remote Procedure Call
JSON-RPC - JSON Remote Procedure CallJSON-RPC - JSON Remote Procedure Call
JSON-RPC - JSON Remote Procedure Call
 
Migration from ASP to ASP.NET
Migration from ASP to ASP.NETMigration from ASP to ASP.NET
Migration from ASP to ASP.NET
 
Rapid java backend and api development for mobile devices
Rapid java backend and api development for mobile devicesRapid java backend and api development for mobile devices
Rapid java backend and api development for mobile devices
 
Real-Time Django
Real-Time DjangoReal-Time Django
Real-Time Django
 
LCA2014 - Introduction to Go
LCA2014 - Introduction to GoLCA2014 - Introduction to Go
LCA2014 - Introduction to Go
 
Implementing Comet using PHP
Implementing Comet using PHPImplementing Comet using PHP
Implementing Comet using PHP
 
Compressing & decompressing in mule
Compressing & decompressing in muleCompressing & decompressing in mule
Compressing & decompressing in mule
 
WebSockets wiith Scala and Play! Framework
WebSockets wiith Scala and Play! FrameworkWebSockets wiith Scala and Play! Framework
WebSockets wiith Scala and Play! Framework
 
An introduction to HTTP/2 for SEOs
An introduction to HTTP/2 for SEOsAn introduction to HTTP/2 for SEOs
An introduction to HTTP/2 for SEOs
 
Realtime applications with EmberJS and XMPP
Realtime applications with EmberJS and XMPPRealtime applications with EmberJS and XMPP
Realtime applications with EmberJS and XMPP
 
PHP And Web Services: Perfect Partners
PHP And Web Services: Perfect PartnersPHP And Web Services: Perfect Partners
PHP And Web Services: Perfect Partners
 
Caching and invalidating with managed store
Caching and invalidating with managed storeCaching and invalidating with managed store
Caching and invalidating with managed store
 
Information security programming in ruby
Information security programming in rubyInformation security programming in ruby
Information security programming in ruby
 
Input and output flow using http and java component
Input and output flow using http and java componentInput and output flow using http and java component
Input and output flow using http and java component
 
NetScaler Web2.0 Push Technology Overview
NetScaler Web2.0 Push Technology OverviewNetScaler Web2.0 Push Technology Overview
NetScaler Web2.0 Push Technology Overview
 
8 Minutes On Rack
8 Minutes On Rack8 Minutes On Rack
8 Minutes On Rack
 
Ruby C10K: High Performance Networking - RubyKaigi '09
Ruby C10K: High Performance Networking - RubyKaigi '09Ruby C10K: High Performance Networking - RubyKaigi '09
Ruby C10K: High Performance Networking - RubyKaigi '09
 
Symfony2 Components - The Event Dispatcher
Symfony2 Components - The Event DispatcherSymfony2 Components - The Event Dispatcher
Symfony2 Components - The Event Dispatcher
 
Web develop in flask
Web develop in flaskWeb develop in flask
Web develop in flask
 
Ruby HTTP clients comparison
Ruby HTTP clients comparisonRuby HTTP clients comparison
Ruby HTTP clients comparison
 

Destacado

[1A5]효율적인안드로이드앱개발
[1A5]효율적인안드로이드앱개발[1A5]효율적인안드로이드앱개발
[1A5]효율적인안드로이드앱개발
NAVER D2
 
IPSN 2009 Contiki / uIP tutorial
IPSN 2009 Contiki / uIP tutorialIPSN 2009 Contiki / uIP tutorial
IPSN 2009 Contiki / uIP tutorial
adamdunkels
 

Destacado (20)

What is XMPP Protocol
What is XMPP ProtocolWhat is XMPP Protocol
What is XMPP Protocol
 
Beyond REST? Building data services with XMPP
Beyond REST? Building data services with XMPPBeyond REST? Building data services with XMPP
Beyond REST? Building data services with XMPP
 
SIP for geeks
SIP for geeksSIP for geeks
SIP for geeks
 
모바일 메신저 아키텍쳐 소개
모바일 메신저 아키텍쳐 소개모바일 메신저 아키텍쳐 소개
모바일 메신저 아키텍쳐 소개
 
XMPP 101
XMPP 101XMPP 101
XMPP 101
 
XMPP In Real Time
XMPP In Real TimeXMPP In Real Time
XMPP In Real Time
 
자바채팅 다중
자바채팅 다중자바채팅 다중
자바채팅 다중
 
[1A5]효율적인안드로이드앱개발
[1A5]효율적인안드로이드앱개발[1A5]효율적인안드로이드앱개발
[1A5]효율적인안드로이드앱개발
 
Android Push Server & MQTT
Android Push Server & MQTTAndroid Push Server & MQTT
Android Push Server & MQTT
 
Switch to Python 3…now…immediately
Switch to Python 3…now…immediatelySwitch to Python 3…now…immediately
Switch to Python 3…now…immediately
 
Openfire
OpenfireOpenfire
Openfire
 
XMPP Technical Overview + Jingle Protocol Study
XMPP Technical Overview + Jingle Protocol StudyXMPP Technical Overview + Jingle Protocol Study
XMPP Technical Overview + Jingle Protocol Study
 
REST is not enough: Using Push Notifications to better support your mobile cl...
REST is not enough: Using Push Notifications to better support your mobile cl...REST is not enough: Using Push Notifications to better support your mobile cl...
REST is not enough: Using Push Notifications to better support your mobile cl...
 
2014 ChattingCat service architecture
2014 ChattingCat service architecture2014 ChattingCat service architecture
2014 ChattingCat service architecture
 
IPSN 2009 Contiki / uIP tutorial
IPSN 2009 Contiki / uIP tutorialIPSN 2009 Contiki / uIP tutorial
IPSN 2009 Contiki / uIP tutorial
 
PostgreSql vaccum
PostgreSql vaccumPostgreSql vaccum
PostgreSql vaccum
 
Contiki introduction I.
Contiki introduction I.Contiki introduction I.
Contiki introduction I.
 
Mobile Instant Messaging
Mobile Instant MessagingMobile Instant Messaging
Mobile Instant Messaging
 
Nanomsg - Scalable Networking Library
Nanomsg - Scalable Networking LibraryNanomsg - Scalable Networking Library
Nanomsg - Scalable Networking Library
 
Event Driven Architecture Concepts in Web Technologies - Part 2
Event Driven Architecture Concepts in Web Technologies - Part 2Event Driven Architecture Concepts in Web Technologies - Part 2
Event Driven Architecture Concepts in Web Technologies - Part 2
 

Similar a The Real Time Web with XMPP

[DSBW Spring 2009] Unit 07: WebApp Design Patterns & Frameworks (3/3)
[DSBW Spring 2009] Unit 07: WebApp Design Patterns & Frameworks (3/3)[DSBW Spring 2009] Unit 07: WebApp Design Patterns & Frameworks (3/3)
[DSBW Spring 2009] Unit 07: WebApp Design Patterns & Frameworks (3/3)
Carles Farré
 
Jscript Fundamentals
Jscript FundamentalsJscript Fundamentals
Jscript Fundamentals
rspaike
 
Douglas Crockford Presentation Jsonsaga
Douglas Crockford Presentation JsonsagaDouglas Crockford Presentation Jsonsaga
Douglas Crockford Presentation Jsonsaga
Ajax Experience 2009
 
Jsonsaga
JsonsagaJsonsaga
Jsonsaga
nohmad
 
Architecting Web Services
Architecting Web ServicesArchitecting Web Services
Architecting Web Services
Lorna Mitchell
 

Similar a The Real Time Web with XMPP (20)

Ajax
AjaxAjax
Ajax
 
WordPress APIs
WordPress APIsWordPress APIs
WordPress APIs
 
Desafios do Profissionalismo Ágil
Desafios do Profissionalismo ÁgilDesafios do Profissionalismo Ágil
Desafios do Profissionalismo Ágil
 
[DSBW Spring 2009] Unit 07: WebApp Design Patterns & Frameworks (3/3)
[DSBW Spring 2009] Unit 07: WebApp Design Patterns & Frameworks (3/3)[DSBW Spring 2009] Unit 07: WebApp Design Patterns & Frameworks (3/3)
[DSBW Spring 2009] Unit 07: WebApp Design Patterns & Frameworks (3/3)
 
Rack Middleware
Rack MiddlewareRack Middleware
Rack Middleware
 
JavaServer Faces Anti-Patterns and Pitfalls
JavaServer Faces Anti-Patterns and PitfallsJavaServer Faces Anti-Patterns and Pitfalls
JavaServer Faces Anti-Patterns and Pitfalls
 
Jscript Fundamentals
Jscript FundamentalsJscript Fundamentals
Jscript Fundamentals
 
Douglas Crockford Presentation Jsonsaga
Douglas Crockford Presentation JsonsagaDouglas Crockford Presentation Jsonsaga
Douglas Crockford Presentation Jsonsaga
 
Fantom and Tales
Fantom and TalesFantom and Tales
Fantom and Tales
 
Javazone 2010-lift-framework-public
Javazone 2010-lift-framework-publicJavazone 2010-lift-framework-public
Javazone 2010-lift-framework-public
 
JavaScript
JavaScriptJavaScript
JavaScript
 
Pascarello_Investigating JavaScript and Ajax Security
Pascarello_Investigating JavaScript and Ajax SecurityPascarello_Investigating JavaScript and Ajax Security
Pascarello_Investigating JavaScript and Ajax Security
 
Jquery 1
Jquery 1Jquery 1
Jquery 1
 
The JSON Saga
The JSON SagaThe JSON Saga
The JSON Saga
 
Jsonsaga
JsonsagaJsonsaga
Jsonsaga
 
Ridingapachecamel
RidingapachecamelRidingapachecamel
Ridingapachecamel
 
Architecting Web Services
Architecting Web ServicesArchitecting Web Services
Architecting Web Services
 
Javascript Basic
Javascript BasicJavascript Basic
Javascript Basic
 
Javascript: Ajax & DOM Manipulation v1.2
Javascript: Ajax & DOM Manipulation v1.2Javascript: Ajax & DOM Manipulation v1.2
Javascript: Ajax & DOM Manipulation v1.2
 
Jsp
JspJsp
Jsp
 

Último

Seal of Good Local Governance (SGLG) 2024Final.pptx
Seal of Good Local Governance (SGLG) 2024Final.pptxSeal of Good Local Governance (SGLG) 2024Final.pptx
Seal of Good Local Governance (SGLG) 2024Final.pptx
negromaestrong
 
The basics of sentences session 3pptx.pptx
The basics of sentences session 3pptx.pptxThe basics of sentences session 3pptx.pptx
The basics of sentences session 3pptx.pptx
heathfieldcps1
 

Último (20)

Making communications land - Are they received and understood as intended? we...
Making communications land - Are they received and understood as intended? we...Making communications land - Are they received and understood as intended? we...
Making communications land - Are they received and understood as intended? we...
 
Asian American Pacific Islander Month DDSD 2024.pptx
Asian American Pacific Islander Month DDSD 2024.pptxAsian American Pacific Islander Month DDSD 2024.pptx
Asian American Pacific Islander Month DDSD 2024.pptx
 
Explore beautiful and ugly buildings. Mathematics helps us create beautiful d...
Explore beautiful and ugly buildings. Mathematics helps us create beautiful d...Explore beautiful and ugly buildings. Mathematics helps us create beautiful d...
Explore beautiful and ugly buildings. Mathematics helps us create beautiful d...
 
General Principles of Intellectual Property: Concepts of Intellectual Proper...
General Principles of Intellectual Property: Concepts of Intellectual  Proper...General Principles of Intellectual Property: Concepts of Intellectual  Proper...
General Principles of Intellectual Property: Concepts of Intellectual Proper...
 
Application orientated numerical on hev.ppt
Application orientated numerical on hev.pptApplication orientated numerical on hev.ppt
Application orientated numerical on hev.ppt
 
Micro-Scholarship, What it is, How can it help me.pdf
Micro-Scholarship, What it is, How can it help me.pdfMicro-Scholarship, What it is, How can it help me.pdf
Micro-Scholarship, What it is, How can it help me.pdf
 
This PowerPoint helps students to consider the concept of infinity.
This PowerPoint helps students to consider the concept of infinity.This PowerPoint helps students to consider the concept of infinity.
This PowerPoint helps students to consider the concept of infinity.
 
Holdier Curriculum Vitae (April 2024).pdf
Holdier Curriculum Vitae (April 2024).pdfHoldier Curriculum Vitae (April 2024).pdf
Holdier Curriculum Vitae (April 2024).pdf
 
Dyslexia AI Workshop for Slideshare.pptx
Dyslexia AI Workshop for Slideshare.pptxDyslexia AI Workshop for Slideshare.pptx
Dyslexia AI Workshop for Slideshare.pptx
 
Magic bus Group work1and 2 (Team 3).pptx
Magic bus Group work1and 2 (Team 3).pptxMagic bus Group work1and 2 (Team 3).pptx
Magic bus Group work1and 2 (Team 3).pptx
 
Grant Readiness 101 TechSoup and Remy Consulting
Grant Readiness 101 TechSoup and Remy ConsultingGrant Readiness 101 TechSoup and Remy Consulting
Grant Readiness 101 TechSoup and Remy Consulting
 
Introduction to Nonprofit Accounting: The Basics
Introduction to Nonprofit Accounting: The BasicsIntroduction to Nonprofit Accounting: The Basics
Introduction to Nonprofit Accounting: The Basics
 
Seal of Good Local Governance (SGLG) 2024Final.pptx
Seal of Good Local Governance (SGLG) 2024Final.pptxSeal of Good Local Governance (SGLG) 2024Final.pptx
Seal of Good Local Governance (SGLG) 2024Final.pptx
 
Kodo Millet PPT made by Ghanshyam bairwa college of Agriculture kumher bhara...
Kodo Millet  PPT made by Ghanshyam bairwa college of Agriculture kumher bhara...Kodo Millet  PPT made by Ghanshyam bairwa college of Agriculture kumher bhara...
Kodo Millet PPT made by Ghanshyam bairwa college of Agriculture kumher bhara...
 
SOC 101 Demonstration of Learning Presentation
SOC 101 Demonstration of Learning PresentationSOC 101 Demonstration of Learning Presentation
SOC 101 Demonstration of Learning Presentation
 
How to Manage Global Discount in Odoo 17 POS
How to Manage Global Discount in Odoo 17 POSHow to Manage Global Discount in Odoo 17 POS
How to Manage Global Discount in Odoo 17 POS
 
Unit-V; Pricing (Pharma Marketing Management).pptx
Unit-V; Pricing (Pharma Marketing Management).pptxUnit-V; Pricing (Pharma Marketing Management).pptx
Unit-V; Pricing (Pharma Marketing Management).pptx
 
Python Notes for mca i year students osmania university.docx
Python Notes for mca i year students osmania university.docxPython Notes for mca i year students osmania university.docx
Python Notes for mca i year students osmania university.docx
 
The basics of sentences session 3pptx.pptx
The basics of sentences session 3pptx.pptxThe basics of sentences session 3pptx.pptx
The basics of sentences session 3pptx.pptx
 
UGC NET Paper 1 Mathematical Reasoning & Aptitude.pdf
UGC NET Paper 1 Mathematical Reasoning & Aptitude.pdfUGC NET Paper 1 Mathematical Reasoning & Aptitude.pdf
UGC NET Paper 1 Mathematical Reasoning & Aptitude.pdf
 

The Real Time Web with XMPP

Notas del editor

  1. types are available, unavailable, probe, error, (un)subscribe(d)
  2. not intended for humans, can be away, chat, xa, or dnd
  3. human readable string
  4. xml cannot be a string
  5. returning true keeps the handler around