您当前的位置:首页 > 电脑百科 > 程序开发 > 编程百科

看完让你彻底搞懂Websocket原理,附通过netty完成Websocket

时间:2019-09-09 11:18:34  来源:  作者:

看完让你彻底搞懂Websocket原理,附通过netty完成Websocket

 

 

(一)websocket协议概述

假设我们要实现一个WEB版的聊天室可以采用哪些方案?

1.Ajax轮询去服务器取消息

客户端按照某个时间间隔不断地向服务端发送请求,请求服务端的最新数据然后更新客户端显示。这种方式实际上浪费了大量流量并且对服务端造成了很大压力。

2.Flash XMLSocket

在 HTML 页面中内嵌入一个使用了 XMLSocket 类的 Flash 程序。JAVAScript 通过调用此Flash程序提供的套接口接口与服务器端的套接口进行通信。JavaScript 在收到服务器端以 XML 格式传送的信

息后可以很容易地控制 HTML 页面的内容显示。

  • 以上方案的弊端

Ajax 轮询:

  1. Http为半双工协议,也就是说同一时刻,只有一个方向的数据传送。
  2. Http消息冗长,包含请求行、请求头、请求体。占用很多的带宽和服务器资源。
  3. 空轮询问题。
  4. 政府项目直接用ajax,别搞那么复杂,它不存在并发问题。

Flash XMLSocket

  1. 客户端必须安装 Flash 播放器,而且浏览器需要授权。
  2. 因为 XMLSocket 没有 HTTP 隧道功能,XMLSocket 类不能自动穿过防火墙
  3. 因为是使用套接口,需要设置一个通信端口,防火墙、代理服务器也可能对非 HTTP 通道端口进行限制。

为了解决上述弊端,Html5定义了WebSocket协义能更好的节省服务器资源和宽带达到实时通信的目的。

  • webSocket 协议简介

webSocket 是html5 开始提供的一种浏览器与服务器间进行全双工二进制通信协议,其基于TCP双向全双工作进行消息传递,同一时刻即可以发又可以接收消息,相比Http的半双工协议性能有很大的提升。

  • webSocket特点如下:
  1. 单一TCP长连接,采用全双工通信模式。
  2. 对代理、防火墙透明,80端口必须打开吧。
  3. 无头部信息、消息更精简。
  4. 通过ping/pong 来保活。
  5. 服务器可以主动推送消息给客户端,不在需要客户轮询。
  • WebSocket 协议报文格式

任何应用协议都有其特有的报文格式,比如Http协议通过 空格 换行组成其报文。如http 协议不同在于WebSocket属于二进制协议,通过规范进二进位来组成其报文。

 

看完让你彻底搞懂Websocket原理,附通过netty完成Websocket

 

 

  • 报文说明:

FIN

标识是否为此消息的最后一个数据包,占 1 bit

RSV1, RSV2, RSV3

用于扩展协议,一般为0,各占1bit

Opcode

数据包类型(frame type),占4bits

0x0:标识一个中间数据包

0x1:标识一个text类型数据包

0x2:标识一个binary类型数据包

0x3-7:保留

0x8:标识一个断开连接类型数据包

0x9:标识一个ping类型数据包

0xA:表示一个pong类型数据包

0xB-F:保留

MASK

占1bits

用于标识PayloadData是否经过掩码处理。如果是1,Masking-key域的数据即是掩码密钥,用于解码

PayloadData。客户端发出的数据帧需要进行掩码处理,所以此位是1。

Payload length

Payload data的长度,占7bits,7+16bits,7+64bits:

如果其值在0-125,则是payload的真实长度。如果值是126,则后面2个字节形成的16bits无符号整型数的值是payload的真实长度。注意,网络字节序,需要转换。如果值是127,则后面8个字节形成的64bits无符号整型数的值是payload的真实长度。注意,网络字节序,需要转换。

Payload data

应用层数据

  • WebSocket 在浏览当中的使用

Http 连接与webSocket 连接建立示意图

 

看完让你彻底搞懂Websocket原理,附通过netty完成Websocket

 

 

通过javaScript 中的API可以直接操作WebSocket 对象

var ws = new WebSocket(“ws://localhost:8080”);
ws.onopen = function()// 建⽴成功之后触发的事件
{
 console.log(“打开连接”);
 ws.send("ddd"); // 发送消息
};
ws.onmessage = function(evt) { // 接收服务器消息
 console.log(evt.data);
};
ws.onclose = function(evt) {
 console.log(“WebSocketClosed!”); // 关闭连接
};
ws.onerror = function(evt) {
 console.log(“WebSocketError!”); // 连接异常
};

1.申请一个WebSocket对象,并传入WebSocket地址信息,这时client会通过Http先发起握手请求

GET /chat HTTP/1.1
Host: server.example.com
Upgrade: websocket //告诉服务端需要将通信协议升级到websocket
Connection: Upgrade
Sec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ== //浏览器base64加密的密钥,server端收到后需
要提取Sec-WebSocket-Key 信息,然后加密。
Origin: http://example.com
Sec-WebSocket-Protocol: chat, superchat //表⽰客⼾端请求提供的可供选择的⼦协议
Sec-WebSocket-Version: 13 //版本标识

2.服务端响应、并建立连接

HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: SIEylb7zRYJAEgiqJXaOW3V+ZWQ=

3.握手成功促发客户端 onOpen 事件

  • 连接状态查看

通过ws.readyState 可查看当前连接状态可选值

  1. CONNECTING (0):表示还没建立连接。
  2. OPEN (1): 已经建立连接,可以进行通讯。
  3. CLOSING (2):通过关闭握手,正在关闭连接。
  4. CLOSED (3):连接已经关闭或无法打开。

(二)netty实现websocket演示

源码:https://github.com/limingIOS/netFuture/tree/master/源码/『互联网架构』软件架构-io与nio线程模型reactor模型(上)(53)/nio

源码:websocket

WebsocketServer.java

package com.dig8.websocket;

import io.netty.bootstrap.ServerBootstrap;

import io.netty.channel.ChannelFuture;

import io.netty.channel.EventLoopGroup;

import io.netty.channel.nio.NioEventLoopGroup;

import io.netty.channel.socket.nio.NioServerSocketChannel;

import io.netty.handler.logging.LogLevel;

import io.netty.handler.logging.LoggingHandler;

public class WebsocketServer {

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

EventLoopGroup bossGroup = new NioEventLoopGroup();

EventLoopGroup workerGroup = new NioEventLoopGroup();

try{

ServerBootstrap serverBootstrap = new ServerBootstrap();

serverBootstrap.group(bossGroup, workerGroup).channel(NioServerSocketChannel.class)

.handler(new LoggingHandler(LogLevel.INFO))

.childHandler(new WebSocketChannelInitializer());

ChannelFuture channelFuture = serverBootstrap.bind(8989).sync();

channelFuture.channel().closeFuture().sync();

}finally{

bossGroup.shutdownGracefully();

workerGroup.shutdownGracefully();

}

}

}

WebSocketChannelInitializer.java

package com.dig8.websocket;

import io.netty.channel.ChannelInitializer;

import io.netty.channel.ChannelPipeline;

import io.netty.channel.socket.SocketChannel;

import io.netty.handler.codec.http.HttpObjectAggregator;

import io.netty.handler.codec.http.HttpServerCodec;

import io.netty.handler.codec.http.websocketx.WebSocketServerProtocolHandler;

import io.netty.handler.stream.ChunkedWriteHandler;

public class WebSocketChannelInitializer extends ChannelInitializer<SocketChannel> {

@Override

protected void initChannel(SocketChannel ch) throws Exception {

ChannelPipeline pipeline = ch.pipeline();

//HttpServerCodec: 针对http协议进行编解码

pipeline.addLast("httpServerCodec", new HttpServerCodec());

//ChunkedWriteHandler分块写处理,文件过大会将内存撑爆

pipeline.addLast("chunkedWriteHandler", new ChunkedWriteHandler());

/**

* 作用是将一个Http的消息组装成一个完成的HttpRequest或者HttpResponse,那么具体的是什么

* 取决于是请求还是响应, 该Handler必须放在HttpServerCodec后的后面

*/

pipeline.addLast("httpObjectAggregator", new HttpObjectAggregator(8192));

//用于处理websocket, /ws为访问websocket时的uri

pipeline.addLast("webSocketServerProtocolHandler", new WebSocketServerProtocolHandler("/ws"));

pipeline.addLast("myWebSocketHandler", new WebSocketHandler());

}

}

WebSocketHandler.java

package com.dig8.websocket;

import io.netty.channel.Channel;

import io.netty.channel.ChannelHandlerContext;

import io.netty.channel.SimpleChannelInboundHandler;

import io.netty.handler.codec.http.websocketx.TextWebSocketFrame;

import java.util.Date;

public class WebSocketHandler extends SimpleChannelInboundHandler<TextWebSocketFrame> {

@Override

protected void channelRead0(ChannelHandlerContext ctx, TextWebSocketFrame msg) throws Exception {

Channel channel = ctx.channel();

System.out.println(channel.remoteAddress() + ": " + msg.text());

ctx.channel().writeAndFlush(new TextWebSocketFrame("来自服务端: " + new Date().toString()));

}

@Override

public void handlerAdded(ChannelHandlerContext ctx) throws Exception {

System.out.println("ChannelId" + ctx.channel().id().asLongText());

}

@Override

public void handlerRemoved(ChannelHandlerContext ctx) throws Exception {

System.out.println("用户下线: " + ctx.channel().id().asLongText());

}

@Override

public void exceptionCaught(ChannelHandlerContext ctx, Throwable cause) throws Exception {

ctx.channel().close();

}

}

test.html

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>Socket</title>
 <script type="text/javascript">
 var websocket;
 //如果浏览器支持WebSocket
 if(window.WebSocket){
 websocket = new WebSocket("ws://localhost:8989/ws"); //获得WebSocket对象
 //当有消息过来的时候触发
 websocket.onmessage = function(event){
 var respMessage = document.getElementById("respMessage");
 respMessage.value = respMessage.value + "n" + event.data;
 }
 //连接关闭的时候触发
 websocket.onclose = function(event){
 var respMessage = document.getElementById("respMessage");
 respMessage.value = respMessage.value + "n断开连接";
 }
 //连接打开的时候触发
 websocket.onopen = function(event){
 var respMessage = document.getElementById("respMessage");
 respMessage.value = "建立连接";
 }
 }else{
 alert("浏览器不支持WebSocket");
 }
 function sendMsg(msg) { //发送消息
 if(window.WebSocket){
 if(websocket.readyState == WebSocket.OPEN) { //如果WebSocket是打开状态
 websocket.send(msg); //send()发送消息
 }
 }else{
 return;
 }
 }
 </script>
</head>
<body>
<form onsubmit="return false">
 <textarea style="width: 300px; height: 200px;" name="message"></textarea>
 <input type="button" onclick="sendMsg(this.form.message.value)" value="发送"><br>
 <h3>信息</h3>
 <textarea style="width: 300px; height: 200px;" id="respMessage"></textarea>
 <input type="button" value="清空" onclick="javascript:document.getElementById('respMessage').value = ''">
</form>
</body>
</html>

 

看完让你彻底搞懂Websocket原理,附通过netty完成Websocket

 

 

看完让你彻底搞懂Websocket原理,附通过netty完成Websocket

 

 

PS:netty的实现http和websocket基本也就说到这里,具体netty实现RPC这块我没演示,我感觉没必要成熟的框架都是基于netty实现的自己在现实个RPC真没必要,如果想看netty实现RPC直接看dubbo源码就可以了。



Tags:Websocket   点击:()  评论:()
声明:本站部分内容来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,如有任何标注错误或版权侵犯请与我们联系,我们将及时更正、删除,谢谢。
▌相关评论
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表
▌相关推荐
前言项目中有即时聊天的需求,经过调研我们采用了socket.io自己实现了一个聊天服务器。开始的一段时间由于用户不是很多,消息的发送接收都还算流畅,最近随着在线用户数量飙升,每...【详细内容】
2020-05-04   Websocket  点击:(2)  评论:(0)  加入收藏
公司项目使用WebSocket作为主要的请求方式,知其然也要知其所以然,会用也需要知道它的基本原理,所以写此文章分享下自己的浅见,文章主要包括以下内容: WebSocket是什么 WebSocket...【详细内容】
2020-04-30   Websocket  点击:(2)  评论:(0)  加入收藏
因为上篇文章被头条检测为广告嫌疑,可能是有其他网站的地址和下载链接。头条系统已经不再给我推荐,所以本次再写一次,这次不打广告,也不放链接了。大家看看华为商城的客服系统,有...【详细内容】
2020-03-16   Websocket  点击:(18)  评论:(0)  加入收藏
大家看看华为商城的客服系统,有没有想过到底是如何制作出来的。你和客服MM的一问一答到底是如何实现的?学过ajax的朋友肯定知道,可以使用轮询方式,隔一秒到服务器里面去查询是否...【详细内容】
2020-03-16   Websocket  点击:(7)  评论:(0)  加入收藏
在以前的文章中,我们介绍了HTTP通讯,这种通讯有一个缺点,如果我想从直接从服务器发消息给客户端,需要客户端先发起HTTP请求后服务器才能返回数据,且后续服务器想发送数据给客户端...【详细内容】
2020-03-09   Websocket  点击:(12)  评论:(0)  加入收藏
什么是WebSocketWebSocket用于在Web浏览器和服务器之间进行任意的双向数据传输的一种技术。WebSocket协议基于TCP协议实现,包含初始的握手过程,以及后续的多次数据帧双向传输...【详细内容】
2020-03-01   Websocket  点击:(14)  评论:(0)  加入收藏
第一部分 介绍HTTP的缺点在于通信只能由客户端发起,如果服务器有连续的状态变化,客户端要获知就非常的麻烦,只能够使用轮训的方法,很消耗服务器资源。WebSocket很好的解决了HT...【详细内容】
2020-01-09   Websocket  点击:(26)  评论:(0)  加入收藏
WebSocket 是一种标准协议,用于在客户端和服务端之间进行双向数据传输。但它跟 HTTP 没什么关系,它是基于 TCP 的一种独立实现。...【详细内容】
2019-11-06   Websocket  点击:(47)  评论:(0)  加入收藏
如今,在不刷新页面的情况下发送消息并获得即时响应在我们看来是理所当然的事情。但是曾几何时,启用实时功能对开发人员来说是一个真正的挑战。开发社区在HTTP长轮询(http long...【详细内容】
2019-10-21   Websocket  点击:(36)  评论:(0)  加入收藏
一、HTTPHTTP协议是互联网上应用最为广泛的应用层协议,万维网都要遵守HTTP协议。HTTP/1.0HTTP/1.0版本实现了HTTP协议的基本功能,但是1.0版本性能问题比较明显,因为HTTP协议是...【详细内容】
2019-10-12   Websocket  点击:(148)  评论:(0)  加入收藏
(一)websocket协议概述假设我们要实现一个WEB版的聊天室可以采用哪些方案?1.Ajax轮询去服务器取消息客户端按照某个时间间隔不断地向服务端发送请求,请求服务端的最新数据然...【详细内容】
2019-09-09   Websocket  点击:(21)  评论:(0)  加入收藏
服务器端推送技术在web开发中比较常用,在早期最简单的解决方案是采用ajax向服务器轮询消息,这种方式的轮询频率不好控制,会导致服务器的压力。稍优的方案为:当客户端向服务器发...【详细内容】
2019-09-05   Websocket  点击:(49)  评论:(0)  加入收藏
应用的信息交互过程通常是客户端通过浏览器发出一个请求,服务器端接收和审核完请求后进行处理并返回结果给客户端,然后客户端浏览器将信息呈现出来,这种机制对于信息变化不是特别频繁的应用尚能相安无事,但是对于那些实时...【详细内容】
2019-08-15   Websocket  点击:(52)  评论:(0)  加入收藏
TCP/IP协议栈主要分为四层:应用层、传输层、网络层、数据链路层,每层都有相应的协议,如下图 IP:网络层协议;(高速公路)TCP和UDP:传输层协议;(卡车)HTTP:应用层协议;(货物)。HTTP(超文本传...【详细内容】
2019-06-24   Websocket  点击:(639)  评论:(0)  加入收藏
最新更新
栏目热门
栏目头条