如何将 Converse js XMPP 与 React 应用程序集成
Posted
技术标签:
【中文标题】如何将 Converse js XMPP 与 React 应用程序集成【英文标题】：how to integrate converse js XMPP with react application 【发布时间】：2021-03-15 02:19:00 【问题描述】：我想实现一个聊天客户端。所以我尝试使用 conversejs。但我找不到将它与反应应用程序集成。有什么办法吗？
【问题讨论】：
【参考方案1】：<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<link rel="stylesheet" type="text/css" media="screen" href="https://cdn.conversejs.org/7.0.2/dist/converse.min.css">
<script src="https://cdn.conversejs.org/7.0.2/dist/converse.min.js" charset="utf-8"></script>
<title>React App</title>
</head>
<body>
<noscript>You need to enable javascript to run this app.</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
<script>
converse.initialize(
authentication: 'anonymous',
auto_login: true,
auto_join_rooms: [
'anonymous@conference.nomnom.im',
],
bosh_service_url: 'https://conversejs.org/http-bind/', // Please use this connection manager only for testing purposes
jid: 'nomnom.im', // XMPP server which allows anonymous login (doesn't
// allow chatting with other XMPP servers).
notify_all_room_messages: [
'anonymous@conference.nomnom.im',
],
singleton: true,
show_controlbox_by_default: true,
view_mode: 'overlayed'
);
</script>
</html>【讨论】：
以上是关于如何将 Converse js XMPP 与 React 应用程序集成的主要内容，如果未能解决你的问题，请参考以下文章
如何配置 BOSH 服务器以支持我自己的 XMPP 服务器？
将 https 与仅支持 node-xmpp-bosh 的 http 一起使用
使用 converse.js 插件创建受密码保护的房间 [关闭]