参考文章:
XMPP即时通讯协议使用(七)——利用Strophe实现WebIM及strophe.plugins插件使用 - 疯狂的小萝卜头 - 博客园 (cnblogs.com)
javascript - 在基于 Strophe .js聊天应用程序中处理状态 - 堆栈溢出 (stackoverflow.com)
javascript - 在 Strophe js 中处理存在 - 堆栈溢出 (stackoverflow.com)
引用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("请先登录!");
}
})
});