详细文档:https://www.yuque.com/u1475064/mufu2a
发布2.0版本,本次更新加入了uniapp移动端:
账号:张三/123456 李四/123456,也可以在网页端自行注册账号
移动安卓端:https://www.boxim.online/download/boxim.apk
移动H5端: https://www.boxim.online/h5/ ,或扫码:
微信小程序:
一位网友的开源项目,基于盒子IM接口开发的仿QQ客户端,有兴趣的小伙伴可以也关注一下:
https://gitee.com/zyzyteam/crim
模块 | 功能 |
---|---|
im-platform | 与页面进行交互,处理业务请求 |
im-server | 推送聊天消息 |
im-client | 消息推送sdk |
im-common | 公共包 |
im-ui | web页面 |
im-uniapp | app页面 |
1.安装运行环境
2.启动后端服务
mvn clean package
java -jar ./im-platform/target/im-platform.jar
java -jar ./im-server/target/im-server.jar
3.启动前端web
cd im-ui
npm install
npm run serve
4.启动uniapp-h5 将im-uniapp目录导入HBuilderX,点击菜单"运行"->"开发环境-h5" 访问 http://localhost:5173
消息推送的请求代码已经封装在im-client包中,对于需要接入im-server的小伙伴,可以按照下面的教程快速的将IM功能集成到自己的项目中。
注意服务器端和前端都需要接入,服务器端发送消息,前端接收消息。
4.1 服务器端接入
引入pom文件
<dependency>
<groupId>com.bx</groupId>
<artifactId>im-client</artifactId>
<version>2.0.0</version>
</dependency>
内容使用了redis进行通信,所以要配置redis地址:
spring:
redis:
host: 127.0.0.1
port: 6379
直接把IMClient通过@Autowire导进来就可以发送消息了,IMClient 只有2个接口:
public class IMClient {
/**
* 发送私聊消息
*
* @param message 私有消息
*/
public<T> void sendPrivateMessage(IMPrivateMessage<T> message);
/**
* 发送群聊消息(发送结果通过MessageListener接收)
*
* @param message 群聊消息
*/
public<T> void sendGroupMessage(IMGroupMessage<T> message);
}
发送私聊消息(群聊也是类似的方式):
@Autowired
private IMClient imClient;
public void sendMessage(){
IMPrivateMessage<PrivateMessageVO> sendMessage = new IMPrivateMessage<>();
// 发送方的id和终端类型
sendMessage.setSender(new IMUserInfo(1L, IMTerminalType.APP.code()));
// 对方的id
sendMessage.setRecvId(2L);
// 推送给对方所有终端
sendMessage.setRecvTerminals(IMTerminalType.codes());
// 同时推送给自己的其他类型终端
sendMessage.setSendToSelf(true);
// 需要回推发送结果,将在IMListener接收发送结果
sendMessage.setSendResult(true);
// 推送的内容
sendMessage.setData(msgInfo);
// 推送消息
imClient.sendPrivateMessage(sendMessage);
}
监听发送结果: 1.编写消息监听类,实现MessageListener,并加上@IMListener 2.发送消息时指定sendResult为true
@Slf4j
@IMListener(type = IMListenerType.ALL)
public class PrivateMessageListener implements MessageListener {
@Override
public void process(IMSendResult<PrivateMessageVO> result){
PrivateMessageVO messageInfo = result.getData();
if(result.getCode().equals(IMSendCode.SUCCESS.code())){
log.info("消息发送成功,消息id:{},发送者:{},接收者:{},终端:{}",messageInfo.getId(),result.getSender().getId(),result.getReceiver().getId(),result.getReceiver().getTerminal());
}
}
}
4.2 前端接入 首先将im-ui/src/api/wssocket.js拷贝到自己的项目。
接入代码如下:
import * as wsApi from './api/wssocket';
let wsUrl = 'ws://localhost:8878/im'
let token = "您的token";
wsApi.connect(wsUrl,token);
wsApi.onConnect(() => {
// 连接打开
console.log("连接成功");
});
wsApi.onMessage((cmd,msgInfo) => {
if (cmd == 2) {
// 异地登录,强制下线
console.log("您已在其他地方登陆,将被强制下线");
} else if (cmd == 3) {
// 私聊消息
console.log(msgInfo);
} else if (cmd == 4) {
// 群聊消息
console.log(msgInfo);
}
})
wsApi.onClose((e) => {
if (e.code != 3000) {
console.log("意外断开,进行重连");
wsApi.reconnect(wsUrl,token);
}else{
console.log("主动断开");
}
});
私聊:
群聊:
好友列表:
群聊列表:
微信小程序:
1群目前已满员,扫码进入2群:
欢迎进群与小伙们一起交流, 申请加群前请务必先star哦
如果项目对您有帮助,请点亮右上方的star,支持一下作者吧!
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。