基于XMPP服务的Strophe.js用法

参考文章：

引用JS:

<script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="http://cdn.bootcss.com/strophe.js/1.1.3/strophe.min.js"></script>

basic.html页面:

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <script src='../../style/js/jquery.min.js'></script>
    <script src='../../style/js/strophe.js'></script>
    <script src='basic.js'></script>
</head>
<body>
<!-- 这里账号输入时要加后缀名@***也就是自己服务器名称 -->
    JID：<input type="text" id="input-jid" value="****">
    <br>
    密码：<input type="password" id="input-pwd"  value="****">
    <br>
    <button id="btn-login">登录</button>
    <div id="msg" style="height: 400px; width: 400px; overflow: scroll;"></div>
    联系人JID：
    <input type="text" id="input-contacts">
    <br>
    消息：
    <br>
    <textarea id="input-msg" cols="30" rows="4"></textarea>
    <br>
    <button id="btn-send">发送</button>
	<button id="friend">好友列表</button>
    <div id="friendlist" style="height: 400px; width: 400px; overflow: scroll;"></div>
</body>
</html>

basic.js页面:

//这里写自己的服务器地址
var BOSH_SERVICE = 'http://*******/http-bind';
// XMPP连接
var connection = null;
// 当前状态是否连接
var connected = false;
// 当前登录的JID
var jid = "";

// 连接状态改变的事件
function onConnect(status) {
    console.log('status: ' + status)
    if (status == Strophe.Status.CONNFAIL) {
        alert("连接失败！");
    } else if (status == Strophe.Status.AUTHFAIL) {
        alert("登录失败！");
    } else if (status == Strophe.Status.DISCONNECTED) {
        alert("连接断开！");
        connected = false;
    } else if (status == Strophe.Status.CONNECTED) {
        alert("连接成功，可以开始聊天了！");
		console.log('pubsub',connection)
        connected = true;


        // 当接收到<message>节，调用onMessage回调函数。一旦创建了连接，您需要定义钩子来接收消息并能够与其交互
        connection.addHandler(onMessage, null, null, null, null, null);
        

        // 首先要发送一个<presence>给服务器（initial presence）
        connection.send($pres().tree());
		
	//获取订阅的主题信息
	connection.pubsub.getSubscriptions(onMessage,5000);
	
    }
}






// 接收到<message>
function onMessage(msg) {
    console.log('--- msg ---', msg);

    // 解析出<message>的from、type属性，以及body子元素
    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];
        $("#msg").append(from + ":<br>" + Strophe.getText(body) + "<br>")
    }
    return true;
}



// 获取好友列表
function findFriends() {
	var friendsid = [];
	var friendsname = [];
	var iq = $iq({ type: 'get' }).c('query', { xmlns: 'jabber:iq:roster' });
	connection.sendIQ(iq, function (a) {
		$(a).find('item').each(function () {
			var jid = $(this).attr('jid').match(/(\S*)@/)[1];
			var name = $(this).attr('name')
			friendsid.push(jid)
             $("#friendlist").append(name + "<br>")
			friendsname.push(name)
		});
		
	});
	return friendsid,friendsname 
}


$(document).ready(function() {
    //点击登录  通过BOSH连接XMPP服务器
    $('#btn-login').click(function() {
        if(!connected) {
            console.log('jid: ' + $("#input-jid").val());
            console.log('pwd: ' + $("#input-pwd").val());
            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) {
            if($("#input-contacts").val() == '') {
                alert("请输入联系人！");
                return;
            }

            // 创建一个<message>元素并发送
            var msg = $msg({
                to: $("#input-contacts").val(),
                from: jid, 
                type: 'chat'
            }).c("body", null, $("#input-msg").val());
            connection.send(msg.tree());


            $("#msg").append(jid + ":<br>" + $("#input-msg").val() + "<br>");
            $("#input-msg").val('');
        } else {
            alert("请先登录！");
        }
    });
	
	$("#friend").click(function() {
		if(connected) {
			console.log(findFriends()) 
		}else{
			alert("请先登录！");
		}
	})
});

基于XMPP服务的Strophe.js用法

猜你喜欢