实现简单聊天系统

简介: 利用Websocket实现简单的聊天功能

websocket服务端启动类

基于 Netty 的特性,我们来看看简单聊天的系统是咋样的?那么,首先对于后端,我们需要创建一个Websocket Server,这里需要有一对线程组EventLoopGroup,定义完后,需要定义一个Server:

public static void main(String[] args) throws Exception {
        
        EventLoopGroup mainGroup = new NioEventLoopGroup();
        EventLoopGroup subGroup = new NioEventLoopGroup();
        
        try {
            ServerBootstrap server = new ServerBootstrap();
            server.group(mainGroup, subGroup)
                .channel(NioServerSocketChannel.class)
                .childHandler(new WSServerInitialzer());
            
            ChannelFuture future = server.bind(8088).sync();
            
            future.channel().closeFuture().sync();
        } finally {
            mainGroup.shutdownGracefully();
            subGroup.shutdownGracefully();
        }
}

将线程组加入Server,接下来,需要设置一个channel:NioServerSocketChannel,还有一个初始化器:WSServerInitialzer。

第二步,需要对Server进行端口版绑定:

ChannelFuture future = server.bind(8088).sync()

最后,需要对future进行监听。而且监听结束后需要对线程资源进行关闭:

mainGroup.shutdownGracefully();
subGroup.shutdownGracefully();

websocket子处理器initialzer

上面说了WebSocket Server,那么对于socket,有一个初始化处理器,这里我们来定义一个:

public class WSServerInitialzer extends ChannelInitializer<SocketChannel> {

    @Override
    protected void initChannel(SocketChannel ch) throws Exception {
        ChannelPipeline pipeline = ch.pipeline();
        pipeline.addLast(new HttpServerCodec());
        pipeline.addLast(new ChunkedWriteHandler());
        pipeline.addLast(new HttpObjectAggregator(1024*64));

        pipeline.addLast(new WebSocketServerProtocolHandler("/ws"));
        
        pipeline.addLast(new ChatHandler());
    }

}

由于websocket是基于http协议,所以需要有http的编解码器HttpServerCodec,同时,在一些http上,有一些数据流的处理,而且,数据流有大有小,那么可以添加一个大数据流的处理:ChunkedWriteHandler。

通常,会有对httpMessage进行聚合,聚合成FullHttpRequest或FullHttpResponse,而且,几乎在netty中的编程,都会使用到此hanler。

另外,websocket 服务器处理的协议,用于指定给客户端连接访问的路由 : "/ws",本handler会帮你处理一些繁重的复杂的事,比如,会帮你处理握手动作: handshaking(close, ping, pong) ping + pong = 心跳。对于websocket来讲,都是以frames进行传输的,不同的数据类型对应的frames也不同。

最后,我们自定义了一个处理消息的handler:ChatHandler。

chatHandler对消息的处理

在Netty中,有一个用于为websocket专门处理文本的对象TextWebSocketFrame,frame是消息的载体。

public class ChatHandler extends SimpleChannelInboundHandler<TextWebSocketFrame> {
    private static ChannelGroup clients = new DefaultChannelGroup(GlobalEventExecutor.INSTANCE);
    
    @Override
    protected void channelRead0(ChannelHandlerContext ctx, TextWebSocketFrame msg) 
            throws Exception {
        String content = msg.text();
        System.out.println("接受到的数据:" + content);
        
        clients.writeAndFlush(new TextWebSocketFrame("服务器时间在 " + LocalDateTime.now() + " 接受到消息, 消息为:" + content));

    }

    @Override
    public void handlerAdded(ChannelHandlerContext ctx) throws Exception {
        clients.add(ctx.channel());
        System.out.println("客户端连接,channle对应的长id为:" + ctx.channel().id().asLongText());
        System.out.println("客户端连接,channle对应的短id为:" + ctx.channel().id().asShortText());
    }

    @Override
    public void handlerRemoved(ChannelHandlerContext ctx) throws Exception {
        System.out.println("客户端断开,channle对应的长id为:" + ctx.channel().id().asLongText());
        System.out.println("客户端断开,channle对应的短id为:" + ctx.channel().id().asShortText());
    }
}

一开始消息在载体TextWebSocketFrame中,这时候可以直接拿到其中的内容,并且打印出来。而且可以把消息发到对应请求的客户端。当然,也可以把消息转发给所有的客户端,这就涉及到Netty中的channel。这时候,需要管理channel中的用户,这样才能把消息转发到所有channel的用户。也就是上面的handlerAdded函数,当客户端连接服务端之后打开连接,获取客户端的channle,并且放到ChannelGroup中去进行管理。同时,客户端与服务端断开、关闭连接后,会触发handlerRemoved函数,同时ChannelGroup会自动移除对应客户端的channel。

接下来,需要把数据获取后刷新到所有客户端:

for (Channel channel : clients) {
            channel.writeAndFlush(new TextWebSocketFrame("[服务器在]" + LocalDateTime.now() + "接受到消息, 消息为:" + content));
}

注意:这里需要借助于载体来把信息Flush,因为writeAndFlush函数是需要传对象载体,而不是直接字符串。其实同样,作为ChannelGroup clients,其本身提供了writeAndFlush函数,可以直接输出到所有客户端:

clients.writeAndFlush(new TextWebSocketFrame("服务器时间在 " + LocalDateTime.now() + " 接受到消息, 消息为:" + content));

基于js的websocket相关api介绍

首先,需要一个客户端与服务端的连接,这个连接桥梁在js中就是一个socket:

var socket = new WebSocket("ws://192.168.174.145:8088/ws");

再来看看其生命周期,在后端,channel有其生命周期,而前端socket中:

  • onopen(),当客户端与服务端建立连接时,就会触发onopen事件
  • onmessage(),是在客户端收到消息时,就会触发onmessage事件
  • onerror(),出现异常时,前端会触发onerror事件
  • onclose(),客户端与服务端连接关闭后,就会触发onclose事件

接下来看看两个主动的方法:

  • Socket.send(),在前端主动获取内容后,通过send进行消息发送
  • Socket.close(),当用户触发某个按钮,就会断开客户端与服务端的连接

以上就是对于前端websocket js相对应的api。

实现前端websocket

上面介绍了后端对于消息的处理、编解码等,又介绍了websocket js的相关。接下来,我们看看前端如何实现websocket,首先我们先写一个文本输入、点击等功能:

<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        
        <div>send msg:</div>
        <input type="text" id="msgContent"/>
        <input type="button" value="send" onclick="CHAT.chat()"/>
        
        <div>receive msg:</div>
        <div id="receiveMsg" style="background-color: gainsboro;"></div>
    </body>
</html>

访问连接:C:\Users\damon\Desktop\netty\WebChat\index.html,我们可以看到效果:

image.png

接下来,我们需要写websocket js:

<script type="application/javascript">
            
            window.CHAT = {
                socket: null,
                init: function() {
                    if (window.WebSocket) {
                        CHAT.socket = new WebSocket("ws://192.168.174.145:8088/ws");
                        CHAT.socket.onopen = function() {
                            console.log("连接建立成功...");
                        },
                        CHAT.socket.onclose = function() {
                            console.log("连接关闭...");
                        },
                        CHAT.socket.onerror = function() {
                            console.log("发生错误...");
                        },
                        CHAT.socket.onmessage = function(e) {
                            console.log("接受到消息:" + e.data);
                            var receiveMsg = document.getElementById("receiveMsg");
                            var html = receiveMsg.innerHTML;
                            receiveMsg.innerHTML = html + "<br/>" + e.data;
                        }
                    } else {
                        alert("浏览器不支持websocket协议...");
                    }
                },
                chat: function() {
                    var msg = document.getElementById("msgContent");
                    CHAT.socket.send(msg.value);
                }
            };
            
            CHAT.init();
            
        </script>

这样,一个简单的websocket js就写完了,当在文本框输入信息,点击发送,后端即可收到信息,并且回复。

相关文章
|
消息中间件 NoSQL API
环信实现聊天功能
环信实现聊天功能
115 0
|
10月前
|
存储 网络协议 JavaScript
浅谈WebSocket及如何搭建实时聊天系统
WebSocket 是一种在客户端和服务器之间提供全双工、双向通信的网络协议。它是基于TCP/IP协议栈的应用层协议,旨在实现浏览器与服务器之间的实时、低延迟且高效的长连接通信
469 1
|
10月前
|
存储 Java 应用服务中间件
即时通讯技术文集(第36期):《跟着源码学IM》系列专题 [共12篇]
为了更好地分类阅读 52im.net 总计1000多篇精编文章,我将在每周三推送新的一期技术文集,本次是第36期。
122 0
|
10月前
|
存储 关系型数据库 MySQL
基于SSM实现在线聊天系统
基于SSM实现在线聊天系统
|
设计模式 网络协议 算法
即时通讯系列: WebSocket从原理到企业项目技术选型(1)
阅读本篇可能需要的预备知识 《试图取代 TCP 的 QUIC 协议到底是什么》、《抓包与反抓包》、《趣谈网络协议》
646 0
即时通讯系列: WebSocket从原理到企业项目技术选型(1)
|
存储 运维 算法
即时通讯技术文集(第17期):社交软件红包技术专题 [共12篇]
为了更好地分类阅读 52im.net 总计1000多篇精编文章,我将在每周三推送新的一期技术文集,本次是第17 期。
150 0
|
Java 区块链 PHP
即时通讯/即时聊天系统开发详细案例,即时通讯/即时聊天系统开发(JAVA及PHP开发)
  区块链的可追溯性来源于区块链数据结构的特殊性。在区块链系统中,它的链式结构是从创世区块开始的,其后系统产生的所有区块都通过父区块的哈希值前后相连,并最终能追溯到创世区块。
|
存储 运维 算法
即时通讯技术文集(第15期):IM跨平台和社交软件红包技术 [共19篇]
为了更好地分类阅读 52im.net 总计1000多篇精编文章,我将在每周三推送新的一期技术文集,本次是第15 期。
144 0
|
监控 网络协议 安全
即时通讯技即时通讯技术文集(第8期):移动端弱网优化系列 [共14篇]
为了更好地分类阅读52im.net 总计1000多篇精编文章,我将在每周三推送新的一期技术文集,本次是第8 期。
209 0
即时通讯技即时通讯技术文集(第8期):移动端弱网优化系列 [共14篇]
|
移动开发 开发框架 前端开发
即时通讯技术文集(第13期):Web端即时通讯技术精华合集 [共15篇]
为了更好地分类阅读52im.net 总计1000多篇精编文章,我将在每周三推送新的一期技术文集,本次是第13 期。
154 0