本篇主要介绍的是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涉及到的东西比较多,比如表情消息啊、文件消息啊等等。