This action will force synchronization from blue/盒子IM, which will overwrite any changes that you have made since you forked the repository, and can not be recovered!!!
Synchronous operation will process in the background and will refresh the page when finishing processing. Please be patient.
详细文档:https://www.yuque.com/u1475064/mufu2a
发布2.0版本,本次更新加入了uniapp移动端:
账号:张三/123456 李四/123456,也可以在网页端自行注册账号
移动安卓端:https://www.boxim.online/download/boxim.apk
移动H5端: https://www.boxim.online/h5/ ,或扫码:
微信小程序:
注:由于每次发布小程序都需要经过严格且繁琐的审核,当前线上微信小程序并非最新版本,最后一次更新时间是2023年12月
一位网友的开源项目,基于盒子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.init(wsUrl,token);
wsApi.connect();
wsApi.onOpen(() => {
// 连接打开
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) => {
console.log("连接关闭");
});
私聊:
群聊:
好友列表:
群聊列表:
微信小程序:
欢迎进群与小伙们一起交流, 申请加群前请务必先star哦
悄悄放个二维码在这,宝子们..你懂我意思吧
如果项目对您有帮助,请点亮右上方的star,支持一下作者吧!
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。