使用Strophe.js基于xmpp服务实现即时通讯

最新推荐文章于 2024-03-25 09:56:01 发布

东边的小山

最新推荐文章于 2024-03-25 09:56:01 发布

阅读量1.2k

点赞数

分类专栏：架构

原文链接：https://blog.csdn.net/yuruixin_china/article/details/76348812

版权

架构专栏收录该内容

31 篇文章 0 订阅

订阅专栏

最近要做一个直播的礼物功能。刚开始打算使用websocket去实现数据的时效性，但是考虑到后期的并发以及pc+h5+app三端的对接，最终选用 ejabberd作为服务，ejabberd是基于Jabber/XMPP协议的即时通讯服务器，是可扩展性最好的一种Jabber/XMPP服务器，支持分布多个服务器，并且具有容错处理，单台服务器失效不影响整个cluster运作。

最初，同事给了一个converse.js作为web端的客户端，但由于对此不熟，加之converse.js的耦合性较高，不容易实现个性化定制（可能是我太菜了。。。）。最终，选择了Strophe.js作为web端的客户端，一路艰辛，特此记录。

html代码

<!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='test.js'></script>
</head>
<body>
JID：<input type="text" id="input-jid">
<br>
密码：<input type="password" id="input-pwd">
<br>
<button id="btn-login">登录</button>
<div id="msg" style="height: 400px; width: 400px; overflow: scroll;"></div>
<br>
消息：
<br>
<textarea id="input-msg" cols="30" rows="4"></textarea>
<br>
<button id="btn-send">发送</button>
</body>
</html>

// XMPP服务器BOSH地址
var BOSH_SERVICE = 'http://192.168.1.204:5280/http-bind/';

// 房间JID
var ROOM_JID = 'fangjainhao@conference.192.168.1.204';

// XMPP连接
var connection = null;

// 当前状态是否连接
var connected = false;

// 当前登录的JID
var jid = "";

// 连接状态改变的事件
function onConnect(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("连接成功，可以开始聊天了！");
connected = true;

// 当接收到<message>节，调用onMessage回调函数
connection.addHandler(onMessage, null, 'message', null, null, null);

// 首先要发送一个<presence>给服务器（initial presence）
connection.send($pres().tree());

// 发送<presence>元素，加入房间
var pres = $pres({
from: jid,
to: ROOM_JID + "/" + jid.substring(0,jid.indexOf("@"))
}).c('x',{xmlns: 'http://jabber.org/protocol/muc'}).tree();
connection.send(pres);
//connection.sendIQ(pres);//获取房间列表
}
}

// 接收到<message>
function onMessage(msg) {

console.log(msg);
// 解析出<message>的from、type属性，以及body子元素
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() {

// 通过BOSH连接XMPP服务器
$('#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) {

// 创建一个<message>元素并发送
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("请先登录！");
}
});
});

东边的小山

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用Strophe.js基于xmpp服务实现即时通讯

最近要做一个直播的礼物功能。刚开始打算使用websocket去实现数据的时效性，但是考虑到后期的并发以及pc+h5+app三端的对接，最终选用 ejabberd作为服务，ejabberd是基于Jabber/XMPP协议的即时通讯服务器，是可扩展性最好的一种Jabber/XMPP服务器，支持分布多个服务器，并且具有容错处理，单台服务器失效不影响整个cluster运作。最初，同事给了一个conve...
复制链接

扫一扫