如何开发一个仿微信的 Web IM?

最新推荐文章于 2023-06-15 12:02:24 发布

蜗牛812

最新推荐文章于 2023-06-15 12:02:24 发布

阅读量2.5k

点赞数

分类专栏： Openfire 文章标签：开源 openfire strophe XMPP 开发

本文链接：https://blog.csdn.net/haoyuewen812/article/details/44805121

版权

Openfire 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

Company: Yappam
Date: 20150325
Author: Yuewen Hao

序

在这个开源盛行的年代, 想要做出一些功能性开发, 一般来说只要找对了方向, 用对了工具, 都会简单的让你自己都觉得不可思议.

当然, 更重要的是, 我们可以有更多的精力去陪身边的人, 做自己喜欢的事情. 想想就觉得很高兴.

回到主题. 今天, 我们就来看看怎么可以做出一款仿微信客户端聊天的Web IM.

注: IM (Instant Message) 即时性消息, 就比如 QQ, 它就属于客户端的即时性聊天软件.

效果如图:

这里写图片描述

基础概念

为了实现这个效果, 我们首先需要知道几个简单的概念.

XMPP 协议
简单来说, 就是我们需要通过一种规则来聊天.
就像摩斯密码那样. 通过不同长短和个数的 “滴(Di)” “嗒(Da-)”, 对应着协议规则翻译成不同的字母.
就比如, “Di” “Da-” 就是”A”, 而 “Di” “Di” “Di” “Di” 就代表着 “H”.
如图:

而在XMPP 协议中, 它的规则是 XML 文件来定义的.
它通过三种基本的XML 节：IQ Stanza（IQ 节）, Presence Stanza（Presence 节）, Message Stanza（Message 节）, 从而形成了一个基本的即时通信协议平台.
注: Stanza 代表XML消息节
它们分别代表 IQ(Infomation Query 信息查询), Presence(用户出席状态), Message(消息).
就比如,
用户可以发送 IQ Stanza 到服务器, 就可以查询用户的相关信息;
发送Message Stanza 就可以发送聊天消息;
当客户端接受到Presence Stanza 时, 可能就表明有用户发生了离线或者上线.
在整个Session 的生命周期中, 我们就是通过双向传输这些 Stanzas 来实现客户端与服务器的交互的.
有了一种用于聊天的规则, 我们就需要两个来聊天的人. 不然, 总不能指望着两团空气搁那儿干瞪眼儿吧.
也就是说, 我们需要两个懂XMPP 这个规则的”人” – 两个实现了XMPP 协议的客户端.
有了XMPP 协议, 有了客户端, 为了更好的使用和管理所有的客户端用户, 我们就需要一台懂 XMPP 协议的服务器作为不同客户端之间的中间人.
它知晓所有的客户端用户, 并负责管理每个Session 的生命周期.
就像 Web 浏览器和 Web 服务器的关系. 只有客户端和服务器在一起才能构成完整的生态系统.

可以看出来, 我们一种需要一台实现了XMPP 协议的服务器和两个实现了XMPP 协议的客户端.

服务器, 我们使用开源的Openfire 服务器.
其中一台客户端, 我们需要通过仿微信的 Web 页面来实现, 也就需要一种实现了 XMPP 协议的 Javascript 代码. 本例中使用 {{ Strophe.js }}
另外一台客户端, 就随便了, 怎么简单怎么来, 我直接使用了Openfire 官方提供的客户端软件 Spark.

如图:
这里写图片描述

最后实现的效果是两台客户端之间的聊天.
如图:

这里写图片描述

OK. 啰嗦结束, 开始要搞一些实际的东西出来了.

环境搭建 & 源码

注: 由于我使用的版本是3.9.3, 所以, 在安装和使用过程中, 遇到几个问题, 我的安装平台为 “Win7 64位”.

需要使用32位的JDK 版本, 并配置环境变量 {{ EXE4J_JAVA_HOME = # 32位JDK 安装目录 # }}
请使用1.7以上的版本, 如果使用1.6, 服务器将会在安装插件后, 无法加载已安装插件, 我使用的版本是JDK 1.7.0_71 (x86_64 Windows)

第一步, 搭建Openfire 服务器:

参考: http://www.cnblogs.com/hoojo/archive/2012/05/17/2506769.html;
搭建服务器, 网上很多资料, 大家自己去查阅就可以了;
搭建过程中在指定域名时, 配置为 example.org;
配置 hosts 文件, 添加域名 example.org 指向127.0.0.1; 备注: 域名其实可以自定义, 但是在客户端需要指定域名时, 必须要保持一致;
搭建成功后, 请添加用户 hyw, yym, 方便源码演示, 可以自定义用户名.

第二步, 安装Spark 客户端: