这篇文章主要介绍用javascript和jquery、html、css以及用第三方聊天javascript(jsjac)框架构建一个bs web的聊天应用程序。此程序可以和所有连接到openfire服务器的应用进行通信、发送消息。如果要运行本程序还需要一个聊天服务器openfire,
以及需要用到http方式和openfire通信的第三方库(jabberhttpbind)。
jabberhttpbind是jabber提供的xmpp协议通信的http bind发送的形式,它可以完成webbrowser和openfire建立长连接通信。
主要通信流程如下图所示:
用户a通过javascript jsjac.js库发送一条消息到jabberhttpbind这个servlet容器,然后jabberhttpbind的servlet容器会向openfire发送xmpp协议的xml报文。openfire server接收到报文后解析,然后发送给指定的用户b。jabberhttpbind获取到openfire server发送的数据后,解析报文向当前servlet容器中的链接的session中找到指定的用户再发送数据给用户b。
webbrowser端用的是jsjac和jabberhttpbind建立的连接,所有数据都要经过jabberhttpbind解析/转换发送给openfire。
先上张图看看效果,呵呵~这里是用户hoojo和girl的聊天画面,双方在进行互聊……
可以发送表情、改变字体样式(对方界面也可以看到你的字体样式),同时右侧是显示/收缩详情的信息
收缩详情
聊天界面部分截图
用户登录、注册,sendto表示你登录后向谁发送聊天消息、并且建立一个聊天窗口
登录成功后,你可以在日志控制台看到你的登陆状态、或是在firebug控制台中看到你的连接请求状态
登陆失败
只有connecting,就没有下文了
登陆成功后,你就可以给指定用户发送消息,且设置你想发送消息的新用户点击new chat按钮创建新会话
如果你来了新消息,在浏览器的标题栏会有新消息提示
如果你当前聊天界面的窗口都是关闭状态,那么在右下角会有消息提示的闪动图标