netty搭建web聊天室（2）群聊

microelec 发布于2019-08-16 14:42 / 2984人阅读

摘要：上节课完成了的后端搭建，搞定了简单的请求响应，今天来结合前端来完成群聊功能。其实后端群聊很简单，就是把一个用户的输入消息，返回给所有在线客户端，前端去负责筛选显示。

上节课完成了netty的后端搭建，搞定了简单的http请求响应，今天来结合前端websocket来完成群聊功能。话不多说先上图：

前端构建

不使用复杂构建工具直接静态页面走起

使用了zui样式库 http://zui.sexy/?#/，非常不错，有好多模板。我使用的是聊天模板改造

主体部分


    mike多人聊天室，等你来聊
    
  
    
      
        
      
      
        其他人
        其他人的聊天内容
      
    

    
      
        
      
      
        我
        我说话的内容
      
    
  
  
    
      
          
      
            
            昵称:

引入依赖js

websocket的js代码以及业务代码

都有注释就不解释了自己看

后端服务改造

ChatHandler改造，判断websocket响应

    /**
     * 读取客户端发送的消息，并将信息转发给其他客户端的 Channel。
     */
    @Override
    protected void channelRead0(ChannelHandlerContext ctx, Object  request) throws Exception {
           if (request instanceof FullHttpRequest) { //是http请求
               FullHttpResponse response = new DefaultFullHttpResponse(
                        HttpVersion.HTTP_1_1,HttpResponseStatus.OK , Unpooled.wrappedBuffer("Hello netty"
                                .getBytes()));
                response.headers().set("Content-Type", "text/plain");
                response.headers().set("Content-Length", response.content().readableBytes());
                response.headers().set("connection", HttpHeaderValues.KEEP_ALIVE);
                ctx.channel().writeAndFlush(response);
           } else if (request instanceof TextWebSocketFrame) { // websocket请求
               String userId = ctx.channel().id().asLongText();
               System.out.println("收到客户端"+userId+":"+((TextWebSocketFrame)request).text());
               //发送消息给所有客户端
               channels.writeAndFlush(new TextWebSocketFrame(((TextWebSocketFrame)request).text()));
               //发送给单个客户端
               //ctx.channel().writeAndFlush(new TextWebSocketFrame(((TextWebSocketFrame)request).text()));
           }
    }

*　ChatServerInitializer改造，加入WebSocket

    @Override
    protected void initChannel(SocketChannel ch) throws Exception {
            ChannelPipeline pipeline = ch.pipeline();
          //websocket协议本身是基于http协议的，所以这边也要使用http解编码器
            pipeline.addLast(new HttpServerCodec());
            //以块的方式来写的处理器
            pipeline.addLast(new ChunkedWriteHandler());
            //netty是基于分段请求的，HttpObjectAggregator的作用是将请求分段再聚合,参数是聚合字节的最大长度
            pipeline.addLast(new HttpObjectAggregator(1024*1024*1024));

            //ws://server:port/context_path
            //ws://localhost:9999/ws
            //参数指的是contex_path
            pipeline.addLast(new WebSocketServerProtocolHandler("/ws",null,true,65535));

            //自定义handler
            pipeline.addLast(new ChatHandler());

            System.out.println("ChatClient:"+ch.remoteAddress() +"连接上");
        
    }

改造完成

启动后端服务，访问你的前端静态页面就可以和小伙伴聊天了。其实后端群聊很简单，就是把一个用户的输入消息，返回给所有在线客户端，前端去负责筛选显示。自己动手照着搞１０分钟就能完成。

实现功能

输入聊天昵称开始聊天

聊天消息不为空才能发送

发送完自动清空输入，且聚焦输入框

自己的消息显示在左侧，其他人的消息在右侧

别忘了关注我 mike啥都想搞

求关注啊。

云服务器 GPU云服务器 netty语音聊天 web即时聊天 Web聊天服务器 webrtc搭建聊天室

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/73158.html

netty搭建web聊天室（3）单聊

摘要：开始聊天发送聊天信息时消息，这样后端就知道是谁要发给谁，根据用户名去找到具体的线程去单独推送消息，实现单聊。前端待完善左侧聊天列表没有实现，每搜索一个在线用户，应该动态显示在左侧，点击该用户，动态显示右侧聊天窗口进行消息发送。上节课讲了群聊，这次来说说单聊，单聊要比群聊复杂点，但是代码也不是很多，主要是前端显示比较麻烦点。效果：showImg(https://segmentfaul...

Lavender 2019-08-23 14:55 评论0 收藏0
InChat一版，仅仅两个接口实现自己的IM系统（可兼容）

摘要：大家明天一起去唱吧关于数据库设计当前一版不会固定大家的数据库设计，大家可以自己自由设计，同时搭上自己的项目，构建一个附带的自项目。 InChat 一个IM通讯框架一个轻量级、高效率的支持多端（应用与硬件Iot）的异步网络应用通讯框架。（核心底层Netty） Github：InChat 版本目标：完成基本的消息通讯（仅支持文本消息），离线消息存储，历史消息查询，一对一聊天、自我聊天、群...

CrazyCodes 2019-08-16 13:59 评论0 收藏0
用Java构建一个简单的WebSocket聊天项目之新增HTTP接口调度

摘要：前言大家可以看看上一篇用构建一个简单的聊天室在上一篇文章中我们已经实现了自我对话好友交流群聊离线消息等的功能。系统通知恭喜您连续登录超过天，奖励积分。本文首发公众号与个人博客：Java猫说 & 猫叔的博客 | MySelf，转载请申明出处。前言大家可以看看上一篇：用Java构建一个简单的WebSocket聊天室在上一篇文章中我们已经实现了：自我对话、好友交流、群聊、离线消息等...

vvpvvp 2019-08-16 14:10 评论0 收藏0
netty搭建web聊天室（1）

摘要：提供异步的事件驱动的网络应用程序框架和工具，用以快速开发高性能高可靠性的网络服务器和客户端程序。总结我们完成了服务端的简单搭建，模拟了聊天会话场景。之前一直在搞前端的东西，都快忘了自己是个java开发。其实还有好多java方面的东西没搞过，突然了解到netty，觉得有必要学一学。介绍 Netty是由JBOSS提供的一个java开源框架。Netty提供异步的、事件驱动的网络应用程序框...

izhuhaodev 2019-08-16 14:37 评论0 收藏0