java 简单仿微信聊天(springboot)

旧城等待， 2023-05-29 05:05 1阅读 0赞

**源码免费下载地址：关注微信公众号“****虾米聊吧****”，回复关键字“****仿微信聊天****”**

采用springboot netty 简单模仿微信聊天界面和功能。

系统模块：包括手机app端，后台服务端

技术架构：

手机app：Html5+，开发工具HBuilderX

后台服务：springboot + netty + mybatis ，开发工具IDEA

**实现功能：用户注册、登录、用户主页（头像展示上传下载、昵称、账号、个人二维码生成展现、退出登录）、发现页面（朋友圈、添加好友、扫一扫）、通讯录、聊天功能等。**

系统效果图如下：

**1.首先是夜神模拟器模拟的安卓手机效果：**

**界面效果如下：**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p3eDE5OTIxMjE1_size_16_color_FFFFFF_t_70][]         ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p3eDE5OTIxMjE1_size_16_color_FFFFFF_t_70 1][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p3eDE5OTIxMjE1_size_16_color_FFFFFF_t_70 2][]          ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p3eDE5OTIxMjE1_size_16_color_FFFFFF_t_70 3][]

**IPhone 5s真机效果图如下：**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p3eDE5OTIxMjE1_size_16_color_FFFFFF_t_70 4][]    ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p3eDE5OTIxMjE1_size_16_color_FFFFFF_t_70 5][]     ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p3eDE5OTIxMjE1_size_16_color_FFFFFF_t_70 6][]

**项目结构如下**

**前端项目结构：**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p3eDE5OTIxMjE1_size_16_color_FFFFFF_t_70 7][]

**后端项目结构如下：**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p3eDE5OTIxMjE1_size_16_color_FFFFFF_t_70 8][]

**websocket服务主类：**

package com.wechat.netty;
    
    import org.springframework.stereotype.Component;
    
    import io.netty.bootstrap.ServerBootstrap;
    import io.netty.channel.ChannelFuture;
    import io.netty.channel.EventLoopGroup;
    import io.netty.channel.nio.NioEventLoopGroup;
    import io.netty.channel.socket.nio.NioServerSocketChannel;
    
    @Component
    public class WSServer {
    
    	private static class SingletionWSServer {
    		static final WSServer instance = new WSServer();
    	}
    	
    	public static WSServer getInstance() {
    		return SingletionWSServer.instance;
    	}
    	
    	private EventLoopGroup mainGroup;
    	private EventLoopGroup subGroup;
    	private ServerBootstrap server;
    	private ChannelFuture future;
    	
    	public WSServer() {
    		mainGroup = new NioEventLoopGroup();
    		subGroup = new NioEventLoopGroup();
    		server = new ServerBootstrap();
    		server.group(mainGroup, subGroup)
    			.channel(NioServerSocketChannel.class)
    			.childHandler(new WSServerInitialzer());
    	}
    	
    	public void start() {
    		this.future = server.bind(9999);
    		System.err.println("netty websocket server 启动完毕...");
    	}
    }

**websocket初始化器：**

package com.wechat.netty;
    
    import io.netty.channel.ChannelInitializer;
    import io.netty.channel.ChannelPipeline;
    import io.netty.channel.socket.SocketChannel;
    import io.netty.handler.codec.http.HttpObjectAggregator;
    import io.netty.handler.codec.http.HttpServerCodec;
    import io.netty.handler.codec.http.websocketx.WebSocketServerProtocolHandler;
    import io.netty.handler.stream.ChunkedWriteHandler;
    import io.netty.handler.timeout.IdleStateHandler;
    
    public class WSServerInitialzer extends ChannelInitializer<SocketChannel> {
    
    	@Override
    	protected void initChannel(SocketChannel ch) throws Exception {
    		ChannelPipeline pipeline = ch.pipeline();
    		
    		// websocket 基于http协议，所以要有http编解码器
    		pipeline.addLast(new HttpServerCodec());
    		// 对写大数据流的支持 
    		pipeline.addLast(new ChunkedWriteHandler());
    		// 对httpMessage进行聚合，聚合成FullHttpRequest或FullHttpResponse
    		// 几乎在netty中的编程，都会使用到此hanler
    		pipeline.addLast(new HttpObjectAggregator(1024*64));
    		
    		// ====================== 以上是用于支持http协议    ======================
    
    		
    		// ====================== 增加心跳支持 start    ======================
    		// 针对客户端，如果在1分钟时没有向服务端发送读写心跳(ALL)，则主动断开
    		// 如果是读空闲或者写空闲，不处理
    		pipeline.addLast(new IdleStateHandler(8, 10, 12));
    		// 自定义的空闲状态检测
    		pipeline.addLast(new HeartBeatHandler());
    		// ====================== 增加心跳支持 end    ======================
    		
    
    		// ====================== 以下是支持httpWebsocket ======================
    		
    		/**
    		 * websocket 服务器处理的协议，用于指定给客户端连接访问的路由 : /ws
    		 * 本handler会帮你处理一些繁重的复杂的事
    		 * 会帮你处理握手动作： handshaking（close, ping, pong） ping + pong = 心跳
    		 * 对于websocket来讲，都是以frames进行传输的，不同的数据类型对应的frames也不同
    		 */
    		pipeline.addLast(new WebSocketServerProtocolHandler("/ws"));
    		
    		// 自定义的handler
    		pipeline.addLast(new ChatHandler());
    	}
    
    }

**-----------------------------------------20191105--------------------------------------------------------------**

查看微信发现微信有一个通知推送的功能（例如添加好友时会推送“添加好友的通知”到被添加用户的手机上并进行弹窗提示），于是今天抽空在项目中增加了该消息推送功能（使用的是第三方插件“个推”）。

**流程：用户A扫描用户B的二维码，请求添加B为好友，则在B的手机上会接收到相应的通知，点击通知会直接跳转进入app首页。**

**效果如下（接收方即被添加用户）：**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p3eDE5OTIxMjE1_size_16_color_FFFFFF_t_70 9][]            ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p3eDE5OTIxMjE1_size_16_color_FFFFFF_t_70 10][]

**示例代码如下：**

public class GetuiPushToApp {
    
        /**
         * 获取应用基本信息
         */
        private static String appId = "";
        private static String appKey = "";
        private static String masterSecret = "";
        private static String url = "http://sdk.open.api.igexin.com/apiex.htm";
    
        public static void send(String title, String text, String cid) throws Exception {
            IGtPush push = new IGtPush(url, appKey, masterSecret);
            NotificationTemplate template = getNotificationTemplate(title, text);
            SingleMessage message = new SingleMessage();
            message.setOffline(true);
            // 离线有效时间，单位为毫秒
            message.setOfflineExpireTime(24 * 3600 * 1000);
            message.setData(template);
            // 可选，1为wifi，0为不限制网络环境。根据手机处于的网络情况，决定是否下发
            message.setPushNetWorkType(0);
            Target target = new Target();
            target.setAppId(appId);
            target.setClientId(cid);
            //target.setAlias(Alias);
            IPushResult ret = push.pushMessageToSingle(message, target);
            if (ret != null) {
                System.out.println(ret.getResponse().toString());
            } else {
                System.out.println("服务器响应异常");
            }
        }

经过测试后发现系统仍然存在一些小问题，包括用户体验、聊天功能，后续有时间会逐步发现问题并完善问题！

说明：该项目是通过学习慕课大神课堂整理并修改，简单通过真机试运行测试，可用于学习。

**源码免费下载地址：关注微信公众号“****虾米聊吧****”，回复关键字“****仿微信聊天****”**

**关注微信公众号“虾米聊吧”，后续持续放送“技术架构和资料”干货！！！**

一个热衷于分享技术和生活的程序猿，让我们一起交流吧~

![format_png][]

** 微信扫描二维码，关注我的公众号**

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p3eDE5OTIxMjE1_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191104150025106.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p3eDE5OTIxMjE1,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p3eDE5OTIxMjE1_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20191104150009537.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p3eDE5OTIxMjE1,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p3eDE5OTIxMjE1_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20191104150147759.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p3eDE5OTIxMjE1,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p3eDE5OTIxMjE1_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20191104150252226.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p3eDE5OTIxMjE1,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p3eDE5OTIxMjE1_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20191104151228576.PNG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p3eDE5OTIxMjE1,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p3eDE5OTIxMjE1_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20191104151416744.PNG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p3eDE5OTIxMjE1,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p3eDE5OTIxMjE1_size_16_color_FFFFFF_t_70 6]: https://img-blog.csdnimg.cn/20191104151452770.PNG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p3eDE5OTIxMjE1,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p3eDE5OTIxMjE1_size_16_color_FFFFFF_t_70 7]: https://img-blog.csdnimg.cn/20191104151711248.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p3eDE5OTIxMjE1,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p3eDE5OTIxMjE1_size_16_color_FFFFFF_t_70 8]: https://img-blog.csdnimg.cn/20191104151937968.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p3eDE5OTIxMjE1,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p3eDE5OTIxMjE1_size_16_color_FFFFFF_t_70 9]: https://img-blog.csdnimg.cn/201911051525105.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p3eDE5OTIxMjE1,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p3eDE5OTIxMjE1_size_16_color_FFFFFF_t_70 10]: https://img-blog.csdnimg.cn/20191105152726681.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p3eDE5OTIxMjE1,size_16,color_FFFFFF,t_70
[format_png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X2pwZy9ublkwNGdUaWFEVmlicjdOZFdHQ01sTG4yeWh0em5QTjF5dXVtTGE4a0d5V1JuOTNyYTJXbldXR2FJREdoQ2ZZdGRRa2N2S25HMTA5TEd2d2NCSmdOSllRLzY0MA?x-oss-process=image/format,png