Netty结合WebSocket实现简单网页聊天室

时间：2022-06-10 10:07:25

Netty结合WebSocket实现简单网页聊天室

WebSocket是html5规范新引入的功能，用于解决浏览器与后台服务器双向通讯的问题，使用WebSocket技术，后台可以随时向前端推送消息，以保证前后台状态统一，在传统的无状态HTTP协议中，这是“无法做到”的。

WebSocket提出之前，为了解决后台推送消息到前台的需求，提出了一些解决方案，这些方案使用已有的技术（如ajax，iframe，flashplayer，java applet ...），通过一些变通的处理来实现。

webSocket是html5新引入的技术，允许后台随时向前端发送文本或者二进制消息，WebSocket是一种全新的协议，不属于http无状态协议，协议名为"ws"，这意味着一个websocket连接地址会是这样的写法： ws://127.0.0.1:8080/websocket。ws不是http，所以传统的web服务器不一定支持，需要服务器与浏览器同时支持， WebSocket才能正常运行，目前的支持还不普遍，需要特别的web服务器和现代的浏览器。

浏览器对WebSocket的支持 Google Chrome浏览器最先支持WebSocket，随后是Safari，Firefox，此外最新版本的Opera和IE（Opera11，IE10）也支持WebSocket。

客户端：

使用html页面作为载体

使用方法：

1 构造函数

var websocket = new WebSocket("ws://127.0.0.1:8080/websocket");

2 事件open/message/close/error WebSocket#onopen, onmessage, onclose, onerror 连接打开时，回调onopen方法，接收到后台消息时会触发到onmessage事件，后台关闭时调用onclose，出现连接异常时可在onerror中捕获 发送消息 - WebSocket#send(data) 关闭连接 - WebSocket#close(optional code, optional reason)

服务器对WebSocket的支持

WebSocket不同于http协议，传统的web服务器通常不支持WebSocket.而websocket服务器端的开发大概有借助Socket.IO开发、NodeJS和Socket.IO联合开发以及借助netty框架开发等等。这里只对netty框架下的websocket开发进行一个简单的说明！ websocket的协议比较简单, 客户端和普通的浏览器一样通过80或者443端口和服务器进行请求握手,服务器根据http header识别是否一个websocket请求,如果是,则将请求升级为一个websocket连接,握手成功后就进入双向长连接的数据传输阶段. websocket的数据传输是基于帧的方式: 0x00 表示数据开始, 0xff表示数据结束,数据以utf-8编码.

简单的说，第一次请求客户端发送的是http请求，请求头中包含websocket相关的信息，服务器端对请求进行验证：

验证成功后，将请求升级为一个websocket连接，之后的通信就进入双向长连接的数据传输阶段。

一定要注意在messageReceived中要对HttpRequest和WebSocketFrame分别进行处理。

具体代码：

处理 HTTP 请求

public class HttpRequestHandler extends SimpleChannelInboundHandler<FullHttpRequest> { //1
private final String wsUri;
private static final File INDEX;

static {
        URL location = HttpRequestHandler.class.getProtectionDomain().getCodeSource().getLocation();
try {
            String path = location.toURI() + "WebsocketChatClient.html";
            path = !path.contains("file:") ? path : path.substring(5);
            INDEX = new File(path);
        } catch (URISyntaxException e) {
throw new IllegalStateException("Unable to locate WebsocketChatClient.html", e);
        }
    }

public HttpRequestHandler(String wsUri) {
this.wsUri = wsUri;
    }

@Override
public void channelRead0(ChannelHandlerContext ctx, FullHttpRequest request) throws Exception {
if (wsUri.equalsIgnoreCase(request.getUri())) {
            ctx.fireChannelRead(request.retain());                  //2
        } else {
if (HttpHeaders.is100ContinueExpected(request)) {
                send100Continue(ctx);                               //3
            }

            RandomAccessFile file = new RandomAccessFile(INDEX, "r");//4

            HttpResponse response = new DefaultHttpResponse(request.getProtocolVersion(), HttpResponseStatus.OK);
            response.headers().set(HttpHeaders.Names.CONTENT_TYPE, "text/html; charset=UTF-8");

boolean keepAlive = HttpHeaders.isKeepAlive(request);

if (keepAlive) {                                        //5
                response.headers().set(HttpHeaders.Names.CONTENT_LENGTH, file.length());
                response.headers().set(HttpHeaders.Names.CONNECTION, HttpHeaders.Values.KEEP_ALIVE);
            }
            ctx.write(response);                    //6

if (ctx.pipeline().get(SslHandler.class) == null) {     //7
                ctx.write(new DefaultFileRegion(file.getChannel(), 0, file.length()));
            } else {
                ctx.write(new ChunkedNioFile(file.getChannel()));
            }
            ChannelFuture future = ctx.writeAndFlush(LastHttpContent.EMPTY_LAST_CONTENT);           //8
if (!keepAlive) {
                future.addListener(ChannelFutureListener.CLOSE);        //9
            }

            file.close();
        }
    }

private static void send100Continue(ChannelHandlerContext ctx) {
        FullHttpResponse response = new DefaultFullHttpResponse(HttpVersion.HTTP_1_1, HttpResponseStatus.CONTINUE);
        ctx.writeAndFlush(response);
    }

@Override
public void exceptionCaught(ChannelHandlerContext ctx, Throwable cause)
throws Exception {
        Channel incoming = ctx.channel();
        System.out.println("Client:"+incoming.remoteAddress()+"异常");
// 当出现异常就关闭连接
        cause.printStackTrace();
        ctx.close();
    }
}

处理 WebSocket frame

public class TextWebSocketFrameHandler extends
SimpleChannelInboundHandler<TextWebSocketFrame> {

public static ChannelGroup channels = new DefaultChannelGroup(GlobalEventExecutor.INSTANCE);

@Override
protected void channelRead0(ChannelHandlerContext ctx,
 TextWebSocketFrame msg) throws Exception { // (1)
Channel incoming = ctx.channel();
for (Channel channel : channels) {
if (channel != incoming){
        channel.writeAndFlush(new TextWebSocketFrame("[" + incoming.remoteAddress() + "]" + msg.text()));
    } else {
        channel.writeAndFlush(new TextWebSocketFrame("[you]" + msg.text() ));
    }
}
}

@Override
public void handlerAdded(ChannelHandlerContext ctx) throws Exception {  // (2)
Channel incoming = ctx.channel();
for (Channel channel : channels) {
    channel.writeAndFlush(new TextWebSocketFrame("[SERVER] - " + incoming.remoteAddress() + " 加入"));
}
channels.add(ctx.channel());
System.out.println("Client:"+incoming.remoteAddress() +"加入");
}

@Override
public void handlerRemoved(ChannelHandlerContext ctx) throws Exception {  // (3)
Channel incoming = ctx.channel();
for (Channel channel : channels) {
    channel.writeAndFlush(new TextWebSocketFrame("[SERVER] - " + incoming.remoteAddress() + " 离开"));
}
System.out.println("Client:"+incoming.remoteAddress() +"离开");
channels.remove(ctx.channel());
}

@Override
public void channelActive(ChannelHandlerContext ctx) throws Exception { // (5)
Channel incoming = ctx.channel();
System.out.println("Client:"+incoming.remoteAddress()+"在线");
}

@Override
public void channelInactive(ChannelHandlerContext ctx) throws Exception { // (6)
Channel incoming = ctx.channel();
System.out.println("Client:"+incoming.remoteAddress()+"掉线");
}

@Override
public void exceptionCaught(ChannelHandlerContext ctx, Throwable cause)
throws Exception {
Channel incoming = ctx.channel();
System.out.println("Client:"+incoming.remoteAddress()+"异常");
// 当出现异常就关闭连接
cause.printStackTrace();
ctx.close();
}

}

ChannelPipeline 给每一个创建的新的 Channel

public class WebsocketChatServerInitializer extends
ChannelInitializer<SocketChannel> { //1

@Override
public void initChannel(SocketChannel ch) throws Exception {//2
 ChannelPipeline pipeline = ch.pipeline();

pipeline.addLast(new HttpServerCodec());
pipeline.addLast(new HttpObjectAggregator(64*1024));
pipeline.addLast(new ChunkedWriteHandler());
pipeline.addLast(new HttpRequestHandler("/ws"));
pipeline.addLast(new WebSocketServerProtocolHandler("/ws"));
pipeline.addLast(new TextWebSocketFrameHandler());

}
}

服务端：

public class WebsocketChatServer {

private int port;

public WebsocketChatServer(int port) {
this.port = port;
    }

public void run() throws Exception {

        EventLoopGroup bossGroup = new NioEventLoopGroup(); // (1)
        EventLoopGroup workerGroup = new NioEventLoopGroup();
try {
            ServerBootstrap b = new ServerBootstrap(); // (2)
            b.group(bossGroup, workerGroup)
             .channel(NioServerSocketChannel.class) // (3)
             .childHandler(new WebsocketChatServerInitializer())  //(4)
             .option(ChannelOption.SO_BACKLOG, 128)          // (5)
             .childOption(ChannelOption.SO_KEEPALIVE, true); // (6)

            System.out.println("WebsocketChatServer 启动了");

// 绑定端口，开始接收进来的连接
            ChannelFuture f = b.bind(port).sync(); // (7)

// 等待服务器 socket 关闭 。
// 在这个例子中，这不会发生，但你可以优雅地关闭你的服务器。
            f.channel().closeFuture().sync();

        } finally {
            workerGroup.shutdownGracefully();
            bossGroup.shutdownGracefully();

            System.out.println("WebsocketChatServer 关闭了");
        }
    }

public static void main(String[] args) throws Exception {

new WebsocketChatServer(7744).run();

    }
}

客户端：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>WebSocket Chat</title>
</head>
<body>
<script type="text/javascript">
var socket;
if (!window.WebSocket) {
window.WebSocket = window.MozWebSocket;
 }
if (window.WebSocket) {
 socket = new WebSocket("ws://localhost:7744/ws");
 socket.onmessage = function(event) {
var ta = document.getElementById('responseText');
 ta.value = ta.value + '\n' + event.data
 };
 socket.onopen = function(event) {
var ta = document.getElementById('responseText');
 ta.value = "连接开启!";
 };
 socket.onclose = function(event) {
var ta = document.getElementById('responseText');
 ta.value = ta.value + "连接被关闭";
 };
 } else {
 alert("你的浏览器不支持 WebSocket！");
 }

function send(message) {
if (!window.WebSocket) {
return;
 }
if (socket.readyState == WebSocket.OPEN) {
 socket.send(message);
 } else {
 alert("连接没有开启.");
 }
 }
</script>
<form onsubmit="return false;">
<h3>WebSocket 聊天室：</h3>
<textarea id="responseText" style="width: 500px; height: 300px;"></textarea>
<br> 
<input type="text" name="message" style="width: 300px" value="Welcome to www.waylau.com">
<input type="button" value="发送消息" onclick="send(this.form.message.value)">
<input type="button" onclick="javascript:document.getElementById('responseText').value=''" value="清空聊天记录">
</form>
<br> 
<br> 
<a href="http://www.waylau.com/" >更多例子请访问 www.waylau.com</a>
</body>
</html>

标签：

相关文章