XMPP tigase 8.0 与 strophe.js 测试Web聊天服务/即时通信

1 出发点

• React Web 端聊天室
• 离线消息保存与推送

2 本文涉及的资源

• Tigase XMPP Server 8.0 下载
• StropheJS 1.3.2
• Psi 下载
• 阿里云服务器 Centos 7.4
• MySQL 5.7

3 Tigase安装

前提条件，没准备的话就请先搞好:

• JDK已经安装好了，设置了JAVA_HOME
• 数据库已安装好(优先MySQL)
• 你有数据库的root权限
• 服务器8080端口可访问(安全规则)

3.1 Centos服务器中创建新用户与用户组。
SSH连接服务器，进入控制台，创建一个名为tigase的新用户以及用户组

	adduser tigase   #创建用户 tigase
	passwd tigase    #设置该用户的密码
	groupadd tigase  #创建用户组 tigase
	usermod -G tigase tigase #将用户tigase设为tigase用户组

3.2 Tigase 安装包解压
以刚创建的 tigase用户登陆服务器 （之前请将下载 的Tigase 压缩包用工具上传到服务器，反正我放到了 /home/tigase/ SSH上传工具)。

	tar -zxvf tigase-server-8.0.0-b10083-dist-max.tar.gz  #解压缩
	mv tigase-server-8.0.0-b10083 tigase-server  #将解压后的文件夹改名为tigase-server

3.3 启动Web安装脚本
确认你当前用的是之前创建 tigase用户！ 你要是开着 root 用户去做后续的步骤容易翻车！进入安装包启动脚本：

	cd /home/tigase/tigase-server  #进入安装包，必须在这个文件夹里
	scripts/tigase.sh start etc/tigase.conf #执行启动脚本

3.4 Web安装
如果之前的步骤正常，用浏览器访问服务器的8080端口(注意安全规则)就会出现引导安装界面。输入默认用户名: admin 默认密码：tigase，完成后如下图，点击NEXT跟着走就是了：
（1）About software . 直接NEXT

（2）Setup: Advanced Clustering Strategy information .随便填个你的公司名称

（3）Setup: Basic Tigase server configuration . 这里就需要你设置

（4）Setup: Advanced configuration options 直接NEXT，集群需要开启ACS(付费)
（5）Setup: Plugins selection 直接NEXT
（6）Setup: Database configuration 这里就需要之前创建的用户tigase和数据库root权限

（7）Setup: Database connectivity check 正常的话就是一片绿

（8）Setup: Setup security 可不填或者填入之前创建的tigase用户，NEXT
（9）Setup: Saving configuration 这里是关键配置文件的模板，注意存放位置，NEXT
（10 初始化结，切换到服务器控制台

3.5 重启 Tigase
（1）停止

 	cd /home/tigase/tigase-server #进入安装包所在文件夹
 	./scripts/tigase.sh stop #执行脚本

（2）修改配置文件中的 JAVA_HOME
我的配置文件全路径 /home/tigase/tigase-server/etc/tigase.conf

	vi etc/tigase.conf

找到JAVA_HOME，去掉注释#, 修改为你安装的JDK的路径。我修改后如下：

	JAVA_HOME=/opt/jdk/jdk1.8.0_201

（3）启动Tigase
确认你的当前为用户tigase，当前位置为/home/tigase/tigase-server，然后输入命令。我是Centos所以选择了redhat，其他系统可以在对应文件夹中自行查看：

	./scripts/redhat/init.d/tigase start etc/tigase.conf

最后会要求你输入 tigase 用户的密码。看到了没，反复要求这个用户名，你要是用root用户得改很多配置，容易翻车。成功则如下：

	Starting Tigase XMPP server
	Password: 
	Tigase started                                             [  OK  ]

3.6 开放端口
确认当前为tigase用户，查看Tigase 监听的端口：

 	netstat -anp | grep java

阿里云是配置安全规则，自己的服务器可以配置防火墙(tigase用户是没有开端口权限的，注意)，打开端口5222/5223/5269/5280/5290

tcp6       0      0 :::5223       :::*      LISTEN      9409/java           
tcp6       0      0 :::5290       :::*      LISTEN      9409/java           
tcp6       0      0 :::8080       :::*      LISTEN      9409/java           
tcp6       0      0 :::5269       :::*      LISTEN      9409/java           
tcp6       0      0 :::5280       :::*      LISTEN      9409/java           
tcp6       0      0 :::5222       :::*      LISTEN      9409/java 

到此最精简的 Tigase XMPP服务器搭建成功

4 Tigase Psi 连接测试

本部分主要是为了让大家有个使用过程的初步概念，涉及注册、上线、建立会话、状态改变、离线消息等。这里用到了Psi 软件，这是一个已经实现好的聊天客户端，下载安装即可。我这里用的是Window 64位的安装包。

4.1 注册两个账户，并处于在线状态
新安装的Psi启动后会要求你注册账户，填入Tigase服务器IP地址。点击Next

出现如下界面则已表示我们的 Tigase 服务器 已经正常工作咯，是不是很简单？

填入信息，注册成功

可以注册多个用户

用户上线：

4.2 用户之间发送消息
用户之间必须得建立会话才能通信，就和QQ、微信加好友一样

填入对方XMP address JID：
用户地址格式： 用户名[e-mail]+服务器IP地址

在主界面同意加好友：

多开发送消息：

4.3 总结
要满足Web端的聊天需求，我们需要在Web端实现类似Psi客户端的注册、上线、建立会话的过程，这就涉及到了strophe.js

5 strophe.js + react 框架做 Web端

create-react-app 脚手架如何搭建工程以及 Ant Design 的使用就不细说了哈。这里主要说一下怎么简单的使用strophejs。源文件太乱，下面贴一些精简的代码示意关键步骤。

5.1 安装
这里用到官方发布的1.3.2稳定版本

	npm install [e-mail] --save

5.2 组件
在组件中引入 strophe.js的组件：

import {Strophe, $msg, $pres }from 'strophe.js';

5.3 初始化连接对象
典型的在生命周期中初始化state，这里设置了一个connection来接受对象(初始化不会产生连接行为)。注意配置BOSH_SERVICE到自己的服务器IP

const BOSH_SERVICE = 'http://192.168.30.130:5280/xmpp-httpbind';

class WebIM extends React.Component{
	...
    state = {
        connection: null
    }
    ...
    componentDidMount() {
        this.setState({
            connection: new window.Strophe.Connection(BOSH_SERVICE)
        });
    }
    ...
    render() {
        return (
            <div>
            	........
            </div>
        )
    }
}

5.4 开始连接
你可能设置了一个登陆按钮之类的，点击的时候触发连接事件函数，如下代码示例：

• strophe.js 》connect()
• 可以配置你在Psi注册的用户名 [e-mail], 密码test

	//按钮等绑定的事件函数，触发tigase连接
    handleConnectClick = (e) => {
            this.state.connection.connect("[e-mail]", "test", this.handleXMPPCallback);
    }

5.5 连接时回调函数
参照 5.4节的代码，在连接tigase会返回一些参数值表示当前状态，我们关注连接成功与断开连接就可以了。如下示例在连接成功后为该用户绑定一个 message 消息的处理函数。

• strophe.js 》addHandler()

    // 作为connect() 连接时的回调函数，判断连接状态，详情查阅 Strophe.Status
    handleXMPPCallback = (status) => {
    	//如果 Tigase 返回连接成功
		 if (status === window.Strophe.Status.CONNECTED) {
		 	//绑定普通会话消息的的处理函数
            this.state.connection.addHandler(this.handleXMPPMessage, null, 'message', null, null,  null); 
            this.state.connection.send($pres().tree());
        }
		//必须返回 true 否则回调函数只会生效一次
        return true;
    }

5.6 消息处理函数
msg 包含了接受收到数据(XML)，需要利用strophe.js提供的函数分离出你关注的部分，做你自己的业务逻辑就行了。

handleXMPPMessage = (msg) =>{
		var from = msg.getAttribute('from');
	    var elems = msg.getElementsByTagName('body');
    	//只处理chat类型消息
        if (type == "chat" && elems.length > 0) {
        	var body = elems[0];
        	console.log('我收到了来自： ' + from + ': ' + window.Strophe.getText(body));
        }
	//必须返回 true 否则回调函数只会生效一次
	return true;
}

5.7 消息发送到目标用户
你可能通过一个按钮绑定了该发送函数，传入目标用户的地址与消息内容，通过 strophe.js提供的 $msg 构建一个消息对象，向目标用户地址发送。

• strophe.js 》$msg
• strophe.js 》send ()
• 不了解XMPP协议建议别改动 “type:chat” 以及 “body”
• 消息从 from 发送到 to

    handleXMPPSend = ()=>{
        var msg = window.$msg({
            to: "[e-mail]",
            from: "[e-mail]", 
            type: 'chat'
        }).c("body", null, "消息: 我是大佬么？");
        this.state.connection.send(msg.tree());
    }