使用Strophe.js基於xmpp服務實現即時通訊
最近要做一個直播的禮物功能。剛開始打算使用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" stylex="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>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
js代碼：test.js
// 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("請先登錄！");
}
});
});
※Kubernetes 最佳實踐：正常終止
※學生信息管理系統——終極優化
TAG:程序員小新人學習 |