您好,烦请使用 markdown 代码块粘贴代码,以便复现问题。

```
代码
```

发送端代码

<script src="//cdn.jsdelivr.net/npm/leancloud-storage@3.12.0/dist/av-min.js"></script>
		<script src="../../js/realtime.browser.min.js" type="text/javascript" charset="utf-8">
		<script type="text/javascript">
			localStorage.setItem('debug', 'leancloud*,LC*');
			var APP_ID = 'QmCPoKumrBgxHJpOzjnECAe9-gzGzoHsz';
			var APP_KEY = 'o5umgyCAsqUKJBt4toO2s5P4';
			AV.init({
			  appId: APP_ID,
			  appKey: APP_KEY
			});
			var { Realtime, TextMessage } = AV;
			var { Realtime } = require('leancloud-realtime');
			var realtime = new Realtime({
			  appId: 'QmCPoKumrBgxHJpOzjnECAe9-gzGzoHsz',
			  appKey: 'o5umgyCAsqUKJBt4toO2s5P4',
			});
			var { TextMessage } = require('leancloud-realtime');
			// Tom 用自己的名字作为 clientId,获取 IMClient 对象实例
			realtime.createIMClient('Tom').then(function(tom) {
			  // 创建与Jerry之间的对话
			  return tom.createConversation({
				members: ['Jerry'],
				name: 'Tom & Jerry',
				unique: true
			  });
			}).then(function(conversation) {
			  // 发送消息
			  return conversation.send(new TextMessage('耗子,起床!'));
			}).then(function(message) {
			  console.log('Tom & Jerry', '发送成功!');
			}).catch(console.error);
		</script>

接收端代码

<script src="//cdn.jsdelivr.net/npm/leancloud-storage@3.12.0/dist/av-min.js"></script>
		<script src="../../js/realtime.browser.min.js" type="text/javascript" charset="utf-8">
		<script type="text/javascript">
			localStorage.setItem('debug', 'leancloud*,LC*');
			var APP_ID = 'QmCPoKumrBgxHJpOzjnECAe9-gzGzoHsz';
			var APP_KEY = 'o5umgyCAsqUKJBt4toO2s5P4';
			AV.init({
			  appId: APP_ID,
			  appKey: APP_KEY
			});
			var { Realtime, TextMessage } = AV;
			var { Realtime } = require('leancloud-realtime');
			var realtime = new Realtime({
			  appId: 'QmCPoKumrBgxHJpOzjnECAe9-gzGzoHsz',
			  appKey: 'o5umgyCAsqUKJBt4toO2s5P4',
			});
			var { Event } = require('leancloud-realtime');
			// Jerry 登录
			realtime.createIMClient('Jerry').then(function(jerry) {
			  jerry.on(Event.MESSAGE, function(message, conversation) {
				console.log('Message received: ' + message.text);
			  });
			}).catch(console.error);
		</script>

以上的代码都是官网上直接复制的代码,问题出在哪里呢

烦请开一下调试日志:

localStorage.setItem('debug', 'leancloud*,LC*');

然后贴下浏览器 console 里的报错(特别是接收端的报错)

两端我都打开调试日志了呀
在引入JS后我就写了localStorage.setItem('debug', 'leancloud*,LC*');
写在那个位置不对吗?
现在是浏览器没有报错
但是收不到消息

抱歉,看漏了。(一般是直接在浏览器的 console 里写,当然写在 script 标签里也是一样的。)

我怀疑可能是引入的问题。

无论是发送端,还是接收端,从前两行看,采用的是直接通过 script 标签引入的方案:

<script src="//cdn.jsdelivr.net/npm/leancloud-storage@3.12.0/dist/av-min.js"></script>
<script src="../../js/realtime.browser.min.js" type="text/javascript" charset="utf-8">

这里的写法有点别扭,看起来 av-min.js 是直接引用了 cdn.jsdelivr.net,而 realtime 是引用了本地文件,不知道这样分别处理有何用意?先不管这个混合使用 cdn 以及本地文件的问题,采用这种引入方案后,只要这样就可以了:

var { Realtime, TextMessage } = AV;

不用使用后面的:

var { Realtime } = require('leancloud-realtime');
var { TextMessage } = require('leancloud-realtime');

这些是供使用 npm 引入依赖的方案使用的。
理论上,如果项目的配置不是特别奇怪(比如同时也以 npm 的方式安装了依赖,并打了包),这句引入应该是不成功的。
浏览器的 console 应该有报错:

ReferenceError: require is not defined

而接收端这里只有这句:

var { Event } = require('leancloud-realtime');

理论上来说,这样是无法正确声明 Event 的。

推荐统一使用一种引入方式,避免多种引入方式导致混乱,以接收端为例:

<script src="//cdn.jsdelivr.net/npm/leancloud-storage@3.12.0/dist/av-min.js"></script>
<script src="//cdn.jsdelivr.net/npm/leancloud-realtime@4.3.0/dist/realtime.browser.min.js"></script>
<script type="text/javascript">
localStorage.setItem('debug', 'leancloud*,LC*');
var { Realtime, TextMessage, Event } = AV;
var realtime = new Realtime({
  appId: '应用的 app id',
  appKey: '应用的 app key',
});

realtime.createIMClient('Jerry').then(function(jerry) {
  jerry.on(Event.MESSAGE, function(message, conversation) {
    console.log('Message received: ' + message.text);  });
}).catch(console.error);
</script>

Web 中聊天的代码有两种引入方式:

  • CDN 或本地引入
  • npm 引入

两种方式引入 Realtime 的代码只能选一种。

CDN 或本地引入时,初始代码是这样的:

var { Realtime, TextMessage } = AV;
var realtime = new Realtime({appId: '', appKey: ''});
realtime.createIMClient('Tom')....

npm 引入时,初始代码是这样的:

var { Realtime } = require('leancloud-realtime');
var realtime = new Realtime({appId: '', appKey: ''});
realtime.createIMClient('Tom')....

如果您选择的是 CDN 或者本地引入的方式,却使用了 npm 引入的初始代码,一定会报错。如果没有报错,请检查自己的基础项目是否有问题。

嗯,思路清晰了,解决了,谢谢!
但在引入本地的av.js时提示缺少av.js.map 麻烦给个下载地址