基于XMPP协议的WebIM

本篇主要介绍的是XMPP协议与strophe.js的使用
一、导入必须的文件及编写页面

    首先我们需要一个基础的页面，然后导入必须的文件，基本上要导入的就是jquery和strophe.js。页面基本上可以仿照微信的网页版来制作。

二、基础的登录功能

    页面上先添加一个登录框：

<div id="signIn" class="signInPanel">
    <form name="cred">
      <label for="jid">帐号:</label>
      <input type="text" id="jid" value="" /><br/>
      <label for="pass">密码:</label>
      <input type="password" id="pass" value="" /><br/>
      <input type="button" id="connect" value="登录" /><br/>

      <label for="tojid">联系人:</label>
      <input type="text" id="tojid" value="">
    </form>
</div>

底下的tojid是指消息要发送的目标，接着设定几个必须的参数用于登录服务

//XMPP服务器BOSH地址
var BOSH_SERVICE = '/http-bind/';
//XMPP连接
var connection = null;
// 当前状态是否连接
var connected = false;

接下来就是登录按钮的功能以及登录状态connected的修改

/**
 * 连接状态改变
 * @param status
 */
function onConnect(status) {
    if (status == Strophe.Status.CONNECTING) {
        console.log("正在连接");
    } else if (status == Strophe.Status.CONNFAIL) {
        console.log("连接失败");
        $('#connect').get(0).value = "登录";
    } else if (status == Strophe.Status.DISCONNECTING) {
        console.log("正在断开");
    } else if (status == Strophe.Status.DISCONNECTED) {
        console.log("连接断开");
        $('#connect').get(0).value = "登录";
        connected = false;
        alert("连接断开");
        connection.connect($("#jid").val(), $("#pass").val(), onConnect);
    } else if (status == Strophe.Status.CONNECTED) {
        console.log("连接成功");
        connected = true;
        console.log("帐号:" + connection.jid + "密码:" + connection.pass);      
        connection.send($pres().tree());
    }
}

/**
 * 事件监听
 */
$(document).ready(function () {
    connection = new Strophe.Connection(BOSH_SERVICE);
    // 通过BOSH连接XMPP服务器
    $("#connect").click(function () {//登录
        if (!connected) {
            connection.connect($("#jid").val(), $("#pass").val(), onConnect);
            jid = $("#jid").val();
        }
    });
    connection.rawInput = function (data) {
        console.log('RECV: ' + data);
    }
    connection.rawOutput = function (data) { 
        console.log('SEND: ' + data);
    }
});

    这样基本就完成了一个登录功能。登录状态改变的时候会在chrome浏览器中打印状态消息和登录情况，console.log(‘RECV: ’ + data);输出的是接收到的消息而console.log(‘SEND: ’ + data);则是发送出去的消息。

三、消息发送格式

    登录后就是消息的发送了

$("#send").on("click", function () {
    var msg = $msg({
            id : guid,
            to : $("#tojid").val(),
            from : jid,
            type : 'chat'
                    }).c("body", null, msgBody);
    connection.send(msg.tree());
});

    页面上要添加一个send按钮以及用来书写信息用的区域，基本的消息发送格式如上所示，id表示的是这条消息的id一般不能重复所以建议使用guid。to表示的是接收消息的一方，from是指消息发出的一方，type则表示这条消息的类型，到后期消息类型会比较多，比如图片消息、短视频、语音消息之类的，所以做好消息分类会比较好处理。

    以上就是基本的登录和发送消息功能，WebIM涉及到的东西比较多，比如表情消息啊、文件消息啊等等。