WebSocket
为什么使用进阶版呢？ 新的技术肯定是解决了 技术的问题
Http协议都的缺陷 ：
通信只能由客户端发起，需要一种服务端能够主动推送到能力 –
websocket
**websocket：**这是一种双向通信的能力 也叫做 : “全双工”
websocket是由浏览器发起的
通常我们使用 http叫做 ： 短连接 性能好一点
用 websocket 叫做 ： 长连接 复用性高一些
适用于不同场景
这里我们还是使用 http来链连接 只不过 连接之后就传输信息 直到断开为止
应为本质上 http 底层是 tcp 是支持实现全双工的
协议标识符 http://127.0.0.1:8080 ws://127.0.0.1:7777
GET ws://127.0.0.1:7777 HTTP/1.1
Host: 127.0.0.1
Upgrade: websocket # 升级为ws
Connection: Upgrade # 此链接需要升级
Sec-WebSocket-key: client-random-string ... # 标识加密相关信息
响应结果
HTTP/1.1 101
Upgrade: websocket
Connection: Upgrade
响应码 101 代表本次协议需要更改为websocket
连接建立后，支持文本信息及二进制信息。
Websocket实现的原理：
通过http协议进行连接的建立（握手和回答），建立连接后不再使用http，而tcp自身是支持双向通信的，所以能达到“全双工”的效果。
Websocket 应用demo
服务端代码
public class WebSocketServer {
public static void main(String[] args) {
//可以自定义线程的数量
EventLoopGroup bossGroup = new NioEventLoopGroup(1);
// 默认创建的线程数量 = CPU 处理器数量 *2
EventLoopGroup workerGroup = new NioEventLoopGroup();
ServerBootstrap serverBootstrap = new ServerBootstrap();
serverBootstrap.group(bossGroup, workerGroup)
.channel(NioServerSocketChannel.class)
.handler(new LoggingHandler())
//当前连接被阻塞的时候，BACKLOG代表的事 阻塞队列的长度
.option(ChannelOption.SO_BACKLOG, 128)
//设置连接保持为活动状态
.childOption(ChannelOption.SO_KEEPALIVE, true)
.childHandler(new WebSocketInitialzer());
try {
ChannelFuture future = serverBootstrap.bind(7777).sync();
future.channel().closeFuture().sync();
} catch (InterruptedException e) {
e.printStackTrace();
} finally {
bossGroup.shutdownGracefully();
workerGroup.shutdownGracefully();
}
}
}
服务端初始化器
public class WebSocketInitialzer extends ChannelInitializer<Channel> {
@Override
protected void initChannel(Channel ch) throws Exception {
ChannelPipeline pipeline = ch.pipeline();
//增加编解码器 的另一种方式
pipeline.addLast(new HttpServerCodec());
// 块方式写的处理器 适合处理大数据
pipeline.addLast(new ChunkedWriteHandler());
//聚合
pipeline.addLast(new HttpObjectAggregator(512 * 1024));
/*
* 这个时候 我们需要声明我们使用的是 websocket 协议
* netty为websocket也准备了对应处理器 设置的是访问路径
* 这个时候我们只需要访问 ws://127.0.0.1:7777/hello 就可以了
* 这个handler是将http协议升级为websocket 并且使用 101 作为响应码
* */
pipeline.addLast(new WebSocketServerProtocolHandler("/hello"));
pipeline.addLast(new WebSocketHandler());
}
}
服务端处理器
通信使用的单位叫帧 frame
客户端：发送时将消息切割成多个帧
服务端：接收时，将关联的帧重新组装
/*
* 泛型 代表的是处理数据的单位
* TextWebSocketFrame : 文本信息帧
* */
public class WebSocketHandler extends SimpleChannelInboundHandler<TextWebSocketFrame> {
@Override
protected void channelRead0(ChannelHandlerContext ctx, TextWebSocketFrame textWebSocketFrame) throws Exception {
//可以直接调用text 拿到文本信息帧中的信息
System.out.println("msg:" + textWebSocketFrame.text());
Channel channel = ctx.channel();
//我们可以使用新建一个对象 将服务端需要返回的信息放入其中 返回即可
TextWebSocketFrame resp = new TextWebSocketFrame("hello client from websocket server");
channel.writeAndFlush(resp);
}
}
websocket前端编写
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
var socket;
// 判断当前浏览器是否支持websocket
if (!window.WebSocket) {
alert("不支持websocket")
} else {
<!-- 创建websocket 连接对象-->
socket = new WebSocket("ws://127.0.0.1:7777/hello");
//设置开始连接的方法
socket.onopen = function (ev) {
var tmp = document.getElementById("respText");
tmp.value = "连接已经开启";
}
//设置关闭连接的方法
socket.onclose = function (ev) {
var tmp = document.getElementById("respText");
tmp.value = tmp.value + "\n" + "连接已经关闭";
}
//设置接收数据的方法
socket.onmessage = function (ev) {
var tmp = document.getElementById("respText");
tmp.value = tmp.value + "\n" + ev.data;
}
}
function send(message) {
if (!window.socket) {
return
}
/*
* 判断socket的状态
* connecting 正在连接 closing 正在关闭
* closed 已经关闭或打开连接失败
* open 连接可以 已经正常通信
* */
if (socket.readyState == WebSocket.OPEN) {
socket.send(message);
} else {
alert("连接未开启");
}
}
</script>
<!--防止表单自动提交-->
<form onsubmit="return false">
<textarea name="message" style="height: 400px;width: 400px"></textarea>
<input type="button" value="发送" onclick="send(this.form.message.value)">
<textarea id="respText" style="height: 400px;width: 400px"></textarea>
</form>
</body>
</html>
【客户端】
var ws = new WebSocket("ws://127.0.0.1:7777/hello");
ws.onopen = function(ev){
ws.send("hello"); //建立连接后发送数据
}
设计一个样式
左右两个各有一个文本框，中间放一个发送按钮。
左侧文本框用来发送数据，右侧文本框用来显示数据。
演示效果
启动服务发送消息
服务器接受到的消息
小结
- websocket 一般用于做可复用连接，http一般做短链接
- websocket解决了http连接只能客户端发起的痛点