First I was afraid, I was petrified
Kept thinking I could never live without realtime interaction client-side.
But then I spent so many nights thinking how XML did me wrong.
And I grew strong, and JSON helped me get along
And so you’re back with no name-space
I just walked in to find no silos here ‘cause its all de-cen-tral-ized
I shouldn’t used that custom format
XMPP and JSON is the key
If I’d known for just one second interoperability wouldn’t bother me

• » Bristol, Uk
• » Website
• » Github
• » Twitter

Transcript

hello, everyone, yes, I'm going to talk about real‑time in the browser, XMPP I'll try to keep it quite light, if you feel like me, you're a bit frazzled and tired. Okay, so ... XMPP it's the externsble messaging and presence protocol. And this was developed back in 1998. A time when people had lots and lots of different IM clients you had AOL messenger, yahoo messenger, ICQ and you would here Eh‑oo every couple of minutes. It was a bit of rubbish situation, some friends on one, another set on another one, you'd either have to run them all or ignore some friends ‑‑ it was a bit of a crap situation. So, some guys got together and they thought what we'll do and we'll build a system where you can have lots and lots of different servers but they'll all be able to talk to each other. It was originally built as an application called Jabba, but since it's changed to XMPP when it became part of the ITF. And it's not a single server or single piece of code, it's a set of standards, so anyone can implement it, you can have proprietary servers, Open Source servers, and there's lots and lots out there. The big advantage of it is it's forked rated all the servers can talk to each other without any extra coding. (Fedder rated) who here uses the XMPP? Okay. Keep your hands up. That's not right. Okay. So, who of you here uses WhatsApp, yeah, that's a few more. It's basically a hacked version of XMPP they just used some of the bad bits and not some of the good bits. Who here uses Facebook chat? Yeah, okay. Who here uses Hip chat, okay,cool, so you're all using XMPP. I think maybe two or three people that didn't put their hand up. So who here has a smartphone? Yes, see you all use XMPP, you just don't know about it. It's widely use in the areas of finance, government, a lot of messaging systems, companies that do building management use it a lot. My point is it's often not advertised that it's being used. Why do I think XMPP is important? Well, we're seeing the continuing growth of real‑time on the web, you see people bringing up new real‑time systems quite often and you watch how it goes and they just keep making the same mistakes that were solved in XMPP about twelve to fourteen years ago, you see them try to add things like it would be cool if you could run it on multiple servers the and talk to each other and they do this hacky piece of crap, these are problems already solved with XMPP. People shouldn't keep making the same mistakes, the other area where it's quite interesting as well is with the rise of webRTC, peer to peer sessions all greet, but there's no signal in webRTC, how did you find each other? The way it's done currently people use meet me URLs, you is to agree to some terms on a website, maybe tracked, maybe this system doesn't have all the features you want, this one does, and your friends don't like that one, why do that when you can both log into an account and share the details directly? And there's also movement back towards this sort of decentralized web so the Snowden revelation, big targets like Google, Apple Facebook, it's easy for people to request information. If we're running smaller servers and smaller groups, actually to get information about what you're up to is a lot more difficult. And then the last point is, if you also use XMPP you don't just get some chat messaging stuff, you get things like presence, which I'm available right now, I'm away, I'm busy, you get address books, pubsub, you get peer to peer session seat up, you get tons and tons of stuff for free without any extra work. Lets quickly go through some of the fundamentals of XMPP. Stanzas, they're just chunks of XML, there's three basic Stanzas, one of them is message, which is just sort of chat messages, sending updates. The second is presence, which is basically I'm on‑line, I'm off line, there's a really cool feature called priority, which I'll talk about in a second, and the third one is IQ or information query which has set and get, basically like you have very simple HTTP ‑‑ then there's also the JID or the Jabber ID consists of three parts first you is your server, so in this example it's example.org, I then log in as user@example.org. And I then have this third thing on the end called a resource, which is really interesting, even though this was designed back in 1998, it was designed with multiple devices in mind. Going back to the presence Stanza I talked about a second ago. I'm on my laptop work away my laptop has a presence priority of 5. And when people send messages to my user@example.org, messages get routed through to my laptop. When I walk away from my laptop and have my phone, which has been happily sitting there at a priority of four, the laptop goes to sleep drops down to a priority of one, and now it will get routed to me on my mobile phone, so you can always be sure the messages get the device that the person is most likely to be using. Clients. What we say with XMPP is that your clients should be very, very light. And this is really good for mobile phone usage because we don't expect the clients to do any work whatsoever. You save a lot of battery that way. You connect to server in three different standard ways of connecting, one is just a standard socket, the other one is a long poling set up and the new one is the web sockets. And the other thing that's really good, unlike other systems which pole a server to do real‑time, that's quite heavy on your server and your clients, setting up new connections is there any information, no, thanks great! So it's very intensive, where as with XMPP data gets pushed, so, if you imagine kids sat in the back of the car, are we there yet, are we there yet? Are we there yet? In this case we say just shut up and I'll tell you when we're there. Very different. Servers, all they're there for is to route messages, they set up these secure connections between each other, and they handle the authentication. And then the third part is the components which is pretty much where you develop is going to to be held, so the server custom business logic, you can have standard components or you could do something specific to your use case. And a nice way to build components in JavaScript is to use node-xmpp-component. They're server agnostic, so I could write my code in JavaScript and connect to a server in lua and then get rid of the server and replace with Java server and I don't have to change anything about my code. All right, so why don't we see it being used by web developers? Well, the big advantage X M L is the extensibility part but the big ‑‑ in order to achieve that extensibility we use XML, I don't know about you guys, my interactions with XML has been via soap, it's horrible, not nice to deal with in the browser, it's slow you can sometimes lose data and things like that. And also when you compare it to JSON XML seems verbose, ugly, and old fashioned, it's just Yuck. So what I've done is created a library called XMPP for the web. It converts messages to JSON on the server. And then send it down to your over web socket. And this makes it much nicer to develop applications, using XMPP but not be exposed to any of the nasty stuff as web developers we don't really like. So what I'm going to do now is probably get this completely wrong, this will be the funny part of the talk. .. I'm going to do a live demo and show you how easy it is to build an application. I'm going to ask you to help me out, so it's a part participation exercise. I'm going to write a little application here and what it's going to do is listen for incoming chat messages, draw a little circle on the screen and allow you whys guys to move it around. But the interesting bit here is you're all going to connect on servers all around the world and and they're going to talk to my server and perform the actions, so if you ‑‑ that UL, in the meantime I will start coding up something (If you pop open that URL, in the meantime I well start coding something) so I'm just going to drop this over here. Okay, the first thing I need do is log into my server, so let's get that done. So all I have in this, very much like the clients you'll be loading is an MD5 library because a hash of a string is 0‑9 A‑F take the first six characters gives me a nice Hex colour code, Jquery and web socket being delivered for XMPP for the web. Okay, so that's listening for my incoming connection, I'm going to ask it to log in for me. For any of you about to get excited, Ha‑Ha‑Ha. Okay, cool, all right, I'm on‑line, I'm connected. I can start doing nice things, so when I was talking about the JID just now you'll see that I'm connected as lloyd@buddycloud.org, I could ask for a specific resource but didn't. Buddycloud is distributed social network that I work on. You should check it out, it's cool to play with. Okay, so, next thing, I need to draw circle on the screen when I get new connections, What I'm going to do is hash the incoming JID. Do‑Do‑Do. So if I already have it, obviously I don't want to draw again ... otherwise I'm just going to draw myself a nice little circle. I also have some CSS which will handle the circle part. And what I'll do in here as well is I'll draw up an identifier. Okay, and what I'll do then, in order to show you the fact that you are connecting from different domains, I'll change the border colour of the circle to a hash of the domain that you're on. Okay. Sorry, I should of got some music for this really, shouldn't I ... and lastly, actually I'll just leave that. Cool, all right, so I have my draw function, next thing I'm going to listen for a chat message, promise you won't be too much longer. socket dot on ‑‑ actually first of all, I need the tell the server I'm on‑line, I may be connected but I haven't told it when I receive update . Let's say to the server, I'm on‑line. Cool, I'm on‑line and I want to receive updates. Okay, so socket.on XMPP.chat.message, this will pass through a nice message, which is just the content and who sent it to me, so let's go ... First of all we need to draw a circle ... and then we just need to listen to what you've said to me and just shift your circle about, so if I create the hash again ‑‑ okay ‑‑ if we want to go up, we will pick up no, it's minus equals and we'll just shift it by ten pixels. Cool anyone actually logged into the client? Everyone logged in okay? Yep, cool. Okay. Up ... down. We'll just add ten Pixels. We're going to right where right, head left ‑‑ now, hopefully, Oooh, look, someone's already there. If you guys want to start shifting, I'm guessing it's not actually ... I'm guessing I've got this wrong ... Okay, in the UK we have a show called Blue Peter who if when they build something they always have the line "Here's something we made earlier". There we go, that's moving on the screen if all the different servers, it may be a little bit of lag because I am connected to a server on the east coast of the US that's connected to my XMPP which is in Munich which is then connected to a server somewhere in the world depending on which one you guy haves connected to that then connects to the server on the east coast of the US then comes back to Berlin to talk to you, it's going a long way. But as you can see, that's ‑‑ throwing things from many different servers, Polish servers, British servers, French servers, American servers but they're all talking to my server in Munich without any additional code. In summary, XMPP is a secure, scalable real‑time messaging system, it's scalable because when you get a thousand users, rather ‑‑ or tens of thousand users, you don't just, you know, cluster or get more servers, you just create a new domain, so it's very scalable, it's really ‑‑ it's essentially really easy way to help rebuild a de‑centralized web and you get a lot of extras for free. Wanted to keep it very light, hope that was okay. Thanks very much (Applause) Edit transcript via pull request.