< WebSocket是一种为了提搞Web应用程序的性能以及响应性而开发的先进网络协议>
- 是Html5提供的一种浏览器与服务端通信的网络技术,非浏览器场合也可以使用,如andorid、ios等
- 单一TCP连接,全双工通信,也就是客户端与服务端可以互相推送信息
什么叫做全双工和半双工?
全双工:同一时刻,客户端与服务端在两个方向上传输数据
半双工:同一时刻,客户端与服务端只能在一个方向上传输数据
- 基于Http协议之上的,连接建立后,请求头能看到Upgrade:websocket,升级为ws协议请求,状态码是101,附带了每次请求Frames帧的信息
- 对代理、防火墙和路由器透明
- 无头部信息、Cookie 和身份验证、无安全开销
- 通过 ping/pong 帧保持链路激活
- 持久化协议,连接建立后,服务器可以主动传递消息给客户端
与Http协议做个对比:
Http协议的弊病:
Http协议为半双工协议、冗长且繁琐、易收到攻击,如长轮询、非持久化协议
以下通过示例演示如何使用WebSocket来实现双向数据传输:
- 构建服务端入口
public class MyWebSocketServer {
public static void main(String[] args) {
EventLoopGroup bossGroup = new NioEventLoopGroup();
EventLoopGroup workerGroup = new NioEventLoopGroup();
try {
ServerBootstrap bootstrap = new ServerBootstrap();
bootstrap.group(bossGroup, workerGroup).channel(NioServerSocketChannel.class).handler(new LoggingHandler(LogLevel.INFO))
.childHandler(new MyWebSocketChannelInitializer());
ChannelFuture channelFuture = bootstrap.bind(8899).sync();
channelFuture.channel().closeFuture().sync();
} catch (InterruptedException e) {
e.printStackTrace();
} finally {
bossGroup.shutdownGracefully();
workerGroup.shutdownGracefully();
}
}
}
- 创建ChannelInitializer,初始化服务处理链
如何处理WebSocket帧?
由IETF发布的WebSocket RFC,定义了6种帧,Netty为他们每种都提供了一个POJO实现。
BinaryWebSocketFrame 包含了二进制数据
TextWebSocketFrame 包含了文本数据
ContinuationWebSocketFrame 包含了属于上一个BinaryWebSocketFrame或TextWebSocketFrame的文本数据或二进制数据
CloseWebSocketFrame 表示一个CLOSE请求,包含一个关闭状态码和原因
PingWebSocketFrame 请求传输一个PongWebSocketFrame
PongWebSocketFrame 作为一个对PingWebSocketFrame的响应被发送
我们的示例中使用了TextWebSocketFrame,是实际需要处理的帧类型,第3步中自定义处理器来处理响应客户端的消息。
public class MyWebSocketChannelInitializer extends ChannelInitializer<SocketChannel>{
@Override protected void initChannel(SocketChannel ch) throws Exception {
ChannelPipeline channelPipeline = ch.pipeline();
channelPipeline.addLast(new HttpServerCodec());
channelPipeline.addLast(new ChunkedWriteHandler());
// 将多块http消息做聚合
channelPipeline.addLast(new HttpObjectAggregator(8192));
// 这个处理器帮助你完成一些繁重的工作,可以运行一个websocket服务器,它负责websocket的握手以及对控制帧的处理,ping pong,文本或二进制都会传给下一个处理器来处理。
// 参数表示websocket的网址,通常形式:ws://server:port/context_path ,访问本机:ws://localhost:8899/hello
channelPipeline.addLast(new WebSocketServerProtocolHandler("/ws"));
channelPipeline.addLast(new TextWebSocketFrameHandler()); // 添加自定义处理器
}
}
- 自定义处理器,SimpleChannelInboundHandler泛型类型为TextWebSocketFrame。
public class TextWebSocketFrameHandler extends SimpleChannelInboundHandler<TextWebSocketFrame>{
@Override protected void channelRead0(ChannelHandlerContext ctx, TextWebSocketFrame msg) throws Exception {
System.out.println("收到的消息: " + msg.text());
ctx.channel().writeAndFlush(new TextWebSocketFrame("服务器时间: " + LocalDateTime.now() + ",客户端说:" + msg.text()));
}
@Override public void handlerAdded(ChannelHandlerContext ctx) throws Exception {
System.out.println("handlerAdded: " + ctx.channel().id().asLongText());
}
@Override public void handlerRemoved(ChannelHandlerContext ctx) throws Exception {
System.out.println("handlerRemoved: " + ctx.channel().id().asLongText());
}
@Override public void exceptionCaught(ChannelHandlerContext ctx, Throwable cause) throws Exception {
System.out.println("发生异常");
ctx.close();
}
}
有两种方式请求websocket服务端,一种是通过网页的方式实现长连接,另外一种通过第三方库在app中实现与服务端的长连接。
我们的应用程序将采用如下约定:如果被请求的URL以/ws结尾,那么我们将会把该协议升级为WebSocket; 否则,服务器将使用基本的HTTP/S。在连接已升级完成后,所有数据都将会使用WebSocket进行传输。
下面以网页方式为例:
clientwebsocket.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>WebSocket客户端</title>
</head>
<body>
<script type="text/javascript">
var socket;
if (window.WebSocket) {
socket = new WebSocket("ws://localhost:8899/ws");
//相当于服务端的channelRead0,收到了服务端发送过来的消息时会被调用。
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 + "\n" + "连接关闭";
}
} 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">
<textarea name="message" style="width: 400px; height: 200px"></textarea>
<input type="button" value="发送数据" onclick="send(this.form.message.value)"/>
<h3> 服务端输出:</h3>
<textarea id="responseText" style="width: 400px; height: 200px"></textarea>
<input type="button" onclick="javascript:document.getElementById('responseText').value=''" value="清空内容"/>
</form>
</body>
</html>
运行服务端和html页面:
客户端浏览器与服务端双向通信示例
网友评论