1 出發(fā)點

• React Web 端聊天室
• 離線消息保存與推送

2 本文涉及的資源

• Tigase XMPP Server 8.0 下載
• StropheJS 1.3.2
• Psi 下載
• 阿里云服務(wù)器 Centos 7.4
• MySQL 5.7

3 Tigase安裝

前提條件，沒準(zhǔn)備的話就請先搞好:

• JDK已經(jīng)安裝好了，設(shè)置了JAVA_HOME
• 數(shù)據(jù)庫已安裝好(優(yōu)先MySQL)
• 你有數(shù)據(jù)庫的root權(quán)限
• 服務(wù)器8080端口可訪問(安全規(guī)則)

3.1 Centos服務(wù)器中創(chuàng)建新用戶與用戶組。
SSH連接服務(wù)器，進入控制臺，創(chuàng)建一個名為tigase的新用戶以及用戶組

adduser tigase #創(chuàng)建用戶 tigasepasswd tigase #設(shè)置該用戶的密碼groupadd tigase #創(chuàng)建用戶組 tigaseusermod -G tigase tigase #將用戶tigase設(shè)為tigase用戶組

3.2 Tigase 安裝包解壓
以剛創(chuàng)建的 tigase用戶登陸服務(wù)器 （之前請將下載 的Tigase 壓縮包用工具上傳到服務(wù)器，反正我放到了 /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安裝腳本
確認(rèn)你當(dāng)前用的是之前創(chuàng)建 tigase用戶！ 你要是開著 root 用戶去做后續(xù)的步驟容易翻車！進入安裝包啟動腳本：

cd /home/tigase/tigase-server #進入安裝包，必須在這個文件夾里scripts/tigase.sh start etc/tigase.conf #執(zhí)行啟動腳本

3.4 Web安裝
如果之前的步驟正常，用瀏覽器訪問服務(wù)器的8080端口(注意安全規(guī)則)就會出現(xiàn)引導(dǎo)安裝界面。輸入默認(rèn)用戶名: admin 默認(rèn)密碼：tigase，完成后如下圖，點擊NEXT跟著走就是了：
（1）About software . 直接NEXT

（2）Setup: Advanced Clustering Strategy information .隨便填個你的公司名稱

（3）Setup: Basic Tigase server configuration . 這里就需要你設(shè)置

（4）Setup: Advanced configuration options 直接NEXT，集群需要開啟ACS(付費)
（5）Setup: Plugins selection 直接NEXT
（6）Setup: Database configuration 這里就需要之前創(chuàng)建的用戶tigase和數(shù)據(jù)庫root權(quán)限

（7）Setup: Database connectivity check 正常的話就是一片綠

（8）Setup: Setup security 可不填或者填入之前創(chuàng)建的tigase用戶，NEXT
（9）Setup: Saving configuration 這里是關(guān)鍵配置文件的模板，注意存放位置，NEXT
（10 初始化結(jié)，切換到服務(wù)器控制臺

3.5 重啟 Tigase
（1）停止

cd /home/tigase/tigase-server #進入安裝包所在文件夾./scripts/tigase.sh stop #執(zhí)行腳本

（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
確認(rèn)你的當(dāng)前為用戶tigase，當(dāng)前位置為/home/tigase/tigase-server，然后輸入命令。我是Centos所以選擇了redhat，其他系統(tǒng)可以在對應(yīng)文件夾中自行查看：

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

最后會要求你輸入 tigase 用戶的密碼。看到了沒，反復(fù)要求這個用戶名，你要是用root用戶得改很多配置，容易翻車。成功則如下：

Starting Tigase XMPP serverPassword: Tigase started [ OK ]

3.6 開放端口
確認(rèn)當(dāng)前為tigase用戶，查看Tigase 監(jiān)聽的端口：

netstat -anp | grep java

阿里云是配置安全規(guī)則，自己的服務(wù)器可以配置防火墻(tigase用戶是沒有開端口權(quán)限的，注意)，打開端口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服務(wù)器搭建成功

4 Tigase Psi 連接測試

本部分主要是為了讓大家有個使用過程的初步概念，涉及注冊、上線、建立會話、狀態(tài)改變、離線消息等。這里用到了Psi 軟件，這是一個已經(jīng)實現(xiàn)好的聊天客戶端，下載安裝即可。我這里用的是Window 64位的安裝包。

4.1 注冊兩個賬戶，并處于在線狀態(tài)
新安裝的Psi啟動后會要求你注冊賬戶，填入Tigase服務(wù)器IP地址。點擊Next

出現(xiàn)如下界面則已表示我們的 Tigase 服務(wù)器 已經(jīng)正常工作咯，是不是很簡單？

填入信息，注冊成功

可以注冊多個用戶

用戶上線：

4.2 用戶之間發(fā)送消息
用戶之間必須得建立會話才能通信，就和QQ、微信加好友一樣

填入對方XMP address JID：
用戶地址格式： 用戶名+@+服務(wù)器IP地址

在主界面同意加好友：

多開發(fā)送消息：

4.3 總結(jié)
要滿足Web端的聊天需求，我們需要在Web端實現(xiàn)類似Psi客戶端的注冊、上線、建立會話的過程，這就涉及到了strophe.js

5 strophe.js + react 框架做 Web端

create-react-app 腳手架如何搭建工程以及 Ant Design 的使用就不細(xì)說了哈。這里主要說一下怎么簡單的使用strophejs。源文件太亂，下面貼一些精簡的代碼示意關(guān)鍵步驟。

5.1 安裝
這里用到官方發(fā)布的1.3.2穩(wěn)定版本

npm install strophe.js@1.3.2 --save

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

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

5.3 初始化連接對象
典型的在生命周期中初始化state，這里設(shè)置了一個connection來接受對象(初始化不會產(chǎn)生連接行為)。注意配置BOSH_SERVICE到自己的服務(wù)器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 開始連接
你可能設(shè)置了一個登陸按鈕之類的，點擊的時候觸發(fā)連接事件函數(shù)，如下代碼示例：

• strophe.js 》connect()
• 可以配置你在Psi注冊的用戶名 hello@192.168.30.130, 密碼test

//按鈕等綁定的事件函數(shù)，觸發(fā)tigase連接handleConnectClick = (e) => {this.state.connection.connect("hello@192.168.30.130", "test", this.handleXMPPCallback);}

5.5 連接時回調(diào)函數(shù)
參照 5.4節(jié)的代碼，在連接tigase會返回一些參數(shù)值表示當(dāng)前狀態(tài)，我們關(guān)注連接成功與斷開連接就可以了。如下示例在連接成功后為該用戶綁定一個 message 消息的處理函數(shù)。

• strophe.js 》addHandler()

// 作為connect() 連接時的回調(diào)函數(shù)，判斷連接狀態(tài)，詳情查閱 Strophe.StatushandleXMPPCallback = (status) => {//如果 Tigase 返回連接成功if (status === window.Strophe.Status.CONNECTED) {//綁定普通會話消息的的處理函數(shù)this.state.connection.addHandler(this.handleXMPPMessage, null, 'message', null, null, null); this.state.connection.send($pres().tree());}//必須返回 true 否則回調(diào)函數(shù)只會生效一次return true;}

5.6 消息處理函數(shù)
msg 包含了接受收到數(shù)據(jù)(XML)，需要利用strophe.js提供的函數(shù)分離出你關(guān)注的部分，做你自己的業(yè)務(wù)邏輯就行了。

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 否則回調(diào)函數(shù)只會生效一次return true; }

5.7 消息發(fā)送到目標(biāo)用戶
你可能通過一個按鈕綁定了該發(fā)送函數(shù)，傳入目標(biāo)用戶的地址與消息內(nèi)容，通過 strophe.js提供的 $msg 構(gòu)建一個消息對象，向目標(biāo)用戶地址發(fā)送。

• strophe.js 》$msg
• strophe.js 》send ()
• 不了解XMPP協(xié)議建議別改動 “type:chat” 以及 “body”
• 消息從 from 發(fā)送到 to

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

總結(jié)

以上是生活随笔為你收集整理的XMPP tigase 8.0 与 strophe.js 测试Web聊天服务/即时通信的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。