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 #創建用戶 tigasepasswd tigase #設置該用戶的密碼groupadd tigase #創建用戶組 tigaseusermod -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 serverPassword: 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：
用戶地址格式： 用戶名+@+服務器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 strophe.js@1.3.2 --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注冊的用戶名 hello@192.168.30.130, 密碼test

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

5.5 連接時回調函數
參照 5.4節的代碼，在連接tigase會返回一些參數值表示當前狀態，我們關注連接成功與斷開連接就可以了。如下示例在連接成功后為該用戶綁定一個 message 消息的處理函數。

• strophe.js 》addHandler()

// 作為connect() 連接時的回調函數，判斷連接狀態，詳情查閱 Strophe.StatushandleXMPPCallback = (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: "world@192.168.30.130",from: "hello@192.168.30.130", type: 'chat'}).c("body", null, "消息: 我是大佬么？");this.state.connection.send(msg.tree());}

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。