What is a BOSH

BOSH (Bidirectional-Streams Over Synchronous HTTP) is a transport protocol. It can use the synchronous HTTP protocol to simulate two-way streaming between two entities (such as client-server) without polling or asynchronous components.

XMPP defines standards based on BOSH for XMPP data transmission. This is a solution to the problem of HTTP not being able to maintain TCP long connections. In BOSH, when a client sends a request to the server, the server will hold the request if there is no data available, and return the request when there is data available. How to hold it is the key to the problem. Instead of suspending the current thread of the request, there should be an asynchronous processing mechanism

What is a XMPP

XMPP (Extensible Messaging and Presence Protocol) is a network instant Messaging Protocol based on XML and has strong scalability. It is widely used in instant messaging software, online game chat, Web chat and Web message push, networking real-time document collaboration tools, mobile device message push and other scenarios

Because JavaScript on a Web browser cannot handle TCP directly, XMPP servers often provide a BOSH interface that enables instant chat with Web browsers using HTTP long-polling. Strophe.js is a tool library that connects Web browsers to XMPP servers via BOSH.

XMPP server and client communicate through XML stanza. There are three very important XML stanza types:

, < Presence >, and < IQ >.

<message>:

It is used to send messages from one entity to another and can transmit any type of structured information without guaranteeing transmission reliability. The message section is used to send and receive chat messages. For example xxg1@host sends a message “hello” to xxg2@host. The xxg1@host client sends the following XML to the XMPP server, which pushes it to the xxg2@host client. Where the from attribute of

is the sender, the to attribute is the receiver, and the content of the child element is the chat message. “Headline” is used to send a warning or notification, “normal” is like an email and doesn’t wait for a response, and “error” sends an error message

<message from="xxg1@host" to="xxg2@host" type="chat"> <body> Hello </body> </message>Copy the code

<presence>:

Presence provides access to network entities. Users presence, showed his online, so I can have greater probability to communicate with others, people are more willing to communicate with people online), but we don’t have to worry about anyone can also see your online status, unless we have subscribed to the user’s state, subscription, the user’s status information will be automatically sent to the subscriber. In fact, XMPP’s Presence section is a simple, dedicated publish-subscribe method.

In IM, presence is represented in the roster, which holds the list of jids and the user’s subscriptions to those Jids. Once online, the user sends the Presence section, and the server takes care of the rest (notifies themselves that they are online and gets status information about their contacts)

Can be used to indicate a user’s status. For example, when a user’s status changes to “Do not Disturb”, a message is sent to the server:

<presence from="xxg@host">
    <status>Do not disturb</status>
    <priority>0</priority>
    <show>dnd</show>
</presence>
Copy the code

<iq>:

IQ stands for Info/Query and uses a request-response mechanism similar to HTTP. In the following example, the XMPP server returns the results of a < IQ > request by the client to get a contact, reply to a heartbeat, etc. :

<iq from='xxg@host' id='bv1bs71f' type='get'>
    <query xmlns='jabber:iq:roster'/>
</iq>
Copy the code

The server returns:

<iq to='xxg@host' id='bv1bs71f' type='result'>
    <query xmlns='jabber:iq:roster'>
        <item jid='xxg2@host'/>
        <item jid='xxg3@host'/>
    </query>
</iq>
Copy the code

Set up the XMPP server

Before implementing Web browser chat, you first set up an XMPP server. For example, Openfire, Tigase, and Ejabberd are common XMPP servers. Openfire and Tigase are implemented based on Java, and Ejabberd is implemented by Erlang. Although implemented in different languages, they all follow the XMPP protocol, so use either XMPP server. There is a background management system to set some configuration. There is also the Spark client

  • Ejabberd: The E in Ejabberd stands for Erlang, a soft real-time programming language. This technological cornerstone makes EJabberd very fast. It is also highly compatible with the XMPP core and related standards. Ejabberd can be installed in most environments.
  • Openfire: Written in the Java language, Openfire is user-friendly and easy to install.
  • Tigase: Build XMPP server on Linux (Spark client test)

Strophe

Strophe.js is a JS class library written for XMPP. Because the HTTP protocol itself cannot make persistent connections, Strophe uses BOSH emulation to make persistent connections.

<! DOCTYPE HTML > < HTML > < head > < script SRC = "http://cdn.bootcss.com/jquery/1.9.1/jquery.min.js" > < / script > < script SRC = "http://cdn.bootcss.com/strophe.js/1.1.3/strophe.min.js" > < / script > < script SRC = 'test2. Js "> < / script > < / head > < body > <input type="text" id="input-jid"> <br> < p style=" color: RGB (0, 0, 0); font-family: arial, sans-serif; width: 400px; overflow: scroll;" ></div> <br> Message: <br> <textarea id="input-msg" cols="30" rows="4"></textarea <br> <button ID ="btn-send"> </button> </body> </ HTML >Copy the code
var BOSH_SERVICE = 'http://host:5280'; Var ROOM_JID = '[email protected]'; // room JID var connection = null; Var connected = false; Var JID = ""; Function onConnect(status) {if (status == strophe.status. CONNFAIL) {alert(" Connection failed! ); } else if (status == strophe.status. AUTHFAIL) {alert(" login failed! ); } else if (status = = Strophe. Status. DISCONNECTED) {alert (" connection is broken!" ); connected = false; } else if (status == strophe.status. CONNECTED) {alert(" CONNECTED "); ); connected = true; // When the <message> section is received, the onMessage callback function connection.addHandler(onMessage, NULL, 'message', null, null, null) is called; // First send a <presence> to the server (initial Presence) connection.send($pres().tree()); Connection. send($pres({from: jid, to: ROOM_JID + "/" + jid.substring(0,jid.indexOf("@")) }).c('x',{xmlns: 'http://jabber.org/protocol/muc'}).tree()); Function onMessage(MSG) {console.log(MSG); Var from = MSG. GetAttribute ('from'); var from = MSG. GetAttribute ('from'); var type = msg.getAttribute('type'); var elems = msg.getElementsByTagName('body'); if (type == "groupchat" && elems.length > 0) { var body = elems[0]; $("#msg").append(from.substring(from.indexOf('/') + 1) + ":<br>" + Strophe.getText(body) + "<br>") } return true; } $(document).ready(function() {$(#btn-login).click(function() {if(! connected) { connection = new Strophe.Connection(BOSH_SERVICE); connection.connect($("#input-jid").val(), $("#input-pwd").val(), onConnect); jid = $("#input-jid").val(); }}); $("#btn-send"). Click (function() {if(connected) {var MSG = $MSG ({to: ROOM_JID, from: jid, type: 'groupchat' }).c("body", null, $("#input-msg").val()); connection.send(msg.tree()); $("#input-msg").val(''); } else {alert(" Please log in first! ); }}); });Copy the code

Refer to the link

  • A preliminary BOSH
  • What is a BOSH
  • XMPP agreement – IQ
  • The establishment of instant communication system based on XMPP – XMPP IQ details
  • Strophe.js connects XMPP server Openfire and Tigase to Implement Web Private chat and Group Chat (MUC)
  • Strophe.js is a javascript version of the XMPP class library – XMPP learning notes
  • Strophe.js
  • IM design thinking: Web IM mechanism based on synchronous HTTP bidirectional flow (BOSH)