WebSocket就是這麽簡單
阿新 • • 發佈：2018-02-24
優點 優勢 pac 獨立 兩種 客戶端程序 技術分享 spa 方便
前言
今天在慕課網上看到了Java的新教程（Netty入門之WebSocket初體驗）：https://www.imooc.com/learn/941
WebSocket我是聽得很多，沒有真正使用過的技術。我之前也去了解過了WebSocket究竟是什麽東西，不過一直沒有去實踐過。
我在寫監聽器博文的時候，在線人數功能用監聽器的是來做，在評論有說使用WebSocket的方式會更加好。
那麽，我們就來探究一下WebSocket究竟是什麽東西，順便了解一下Netty！
WebSocket介紹
什麽是WebSocket
WebSocket是一個協議，歸屬於IETF。
- HTTP是運行在TCP協議傳輸層上的應用協議，而WebSocket是通過HTTP協議協商如何連接，然後獨立運行在TCP協議傳輸層上的應用協議。
- Websocket是一個持久化的協議，相對於HTTP這種非持久的協議來說。
- websocket約定了一個通信的規範，通過一個握手的機制，客戶端和服務器之間能建立一個類似tcp的連接，從而方便它們之間的通信
為什麽需要WebSocket
添加WebSocket特性，是為了更好、更靈活，輕量的與服務器通訊。因為WebSocket提供了簡單的消息規範，可以更快的適應長連接的環境，其實現在HTTP協議自身就可以做，但是不太輕便。
WebSocket最大的特點就是實現全雙工通信：客戶端能夠實時推送消息給服務端，服務端也能夠實時推送消息給客戶端。
WebSocket可以做聊天室，股票實時價格顯示等應用
糾正WebSocket誤區
WebSocket是一種應用協議，而我們常常看到了HTML5 WebSocket是API,不要將其進行混淆。
廣義上的 HTML5 裏面包含的是 WebSocket API，並不是 WebSocket。簡單的說，可以把 WebSocket 當成 HTTP，WebSocket API 當成 Ajax。
Netty介紹
什麽是Netty
知乎的@郭無心總結得很好，我下面就摘抄一下了(鏈接在下方)：
Netty是什麽？
- 1）本質：JBoss做的一個Jar包
- 2）目的：快速開發高性能、高可靠性的網絡服務器和客戶端程序
- 3）優點：提供異步的、事件驅動的網絡應用程序框架和工具
通俗的說：一個好使的處理Socket的東東
如果沒有Netty？
遠古：java.net + java.io
近代：java.nio
其他：Mina，Grizzly
簡單來說：
- 你想寫個tomcat一樣的Server，可以用netty。
- 你想寫一個即時通訊的應用，可以用netty。
- 你想實現一個高性能Rpc框架，可以用netty。
Netty優勢
Netty優勢：API簡單，性能高，入門門檻低，成熟穩健，修復了很多原生NIO的bug
回到課程中來
課程是以Netty實現WebSocket來進行講解的，也就上邊所說的：用Netty來實現即時通信的應用
源碼下載地址：https://img.mukewang.com/down/5a6e804c0001970d00000000.zip
首先創建了一個全局配置類，WebSocket是全雙工通信的，它是通過通道來進行通信，因此配置了系統通道組，管理所有的通道
/**
* 存儲整個工程的全局配置
* @author liuyazhuang
*
*/
public class NettyConfig {
/**
* 存儲每一個客戶端接入進來時的channel對象
*/
public static ChannelGroup group = new DefaultChannelGroup(GlobalEventExecutor.INSTANCE);
}
配置一些通道的信息(可以理解成Servlet時配置request對象的charset、response對象的緩存)
/**
* 初始化連接時候的各個組件
* @author liuyazhuang
*
*/
public class MyWebSocketChannelHandler extends ChannelInitializer<SocketChannel> {
//配置通道的一些編碼格式、數據大小、處理器(交由誰處理)
@Override
protected void initChannel(SocketChannel e) throws Exception {
e.pipeline().addLast("http-codec", new HttpServerCodec());
e.pipeline().addLast("aggregator", new HttpObjectAggregator(65536));
e.pipeline().addLast("http-chunked", new ChunkedWriteHandler());
e.pipeline().addLast("handler", new MyWebSocketHandler());
}
}Netty接收請求，分別處理HTTP請求和WebSocket請求，此部分在視頻中單單只是代碼編寫，並沒有做過多的介紹。下面我就整理一下：
- 該類是用於處理請求的核心業務類
- 最重要的方法是：messageReceived()方法，主要判斷是HTTP請求還是WebSocket請求
- 是HTTP請求時，就handHttpRequest()來進行處理，該方法判斷是否有握手的傾向，
- 如果不是WebSocket握手請求消息,那麽直接返回HTTP 400 BAD REQUEST 響應給客戶端，應答消息，並關閉鏈接。
- 如果是握手請求，那麽就進行握手,將WebSocket相關的編碼和解碼類動態添加到ChannelPipeline中
- 是websocket則群發，服務端向每個連接上來的客戶端群發消息
- 是HTTP請求時，就handHttpRequest()來進行處理，該方法判斷是否有握手的傾向，
package com.imooc.netty;
import io.netty.buffer.ByteBuf;
import io.netty.buffer.Unpooled;
import io.netty.channel.ChannelFuture;
import io.netty.channel.ChannelFutureListener;
import io.netty.channel.ChannelHandlerContext;
import io.netty.channel.SimpleChannelInboundHandler;
import io.netty.handler.codec.http.DefaultFullHttpResponse;
import io.netty.handler.codec.http.FullHttpRequest;
import io.netty.handler.codec.http.HttpResponseStatus;
import io.netty.handler.codec.http.HttpVersion;
import io.netty.handler.codec.http.websocketx.*;
import io.netty.util.CharsetUtil;
import java.util.Date;
/**
* 接收/處理/響應客戶端websocket請求的核心業務處理類
*
* @author liuyazhuang
*/
public class MyWebSocketHandler extends SimpleChannelInboundHandler<Object> {
private WebSocketServerHandshaker handshaker;
private static final String WEB_SOCKET_URL = "ws://localhost:8888/websocket";
//客戶端與服務端創建連接的時候調用
@Override
public void channelActive(ChannelHandlerContext ctx) throws Exception {
NettyConfig.group.add(ctx.channel());
System.out.println("客戶端與服務端連接開啟...");
}
//客戶端與服務端斷開連接的時候調用
@Override
public void channelInactive(ChannelHandlerContext ctx) throws Exception {
NettyConfig.group.remove(ctx.channel());
System.out.println("客戶端與服務端連接關閉...");
}
//服務端接收客戶端發送過來的數據結束之後調用
@Override
public void channelReadComplete(ChannelHandlerContext ctx) throws Exception {
ctx.flush();
}
//工程出現異常的時候調用
@Override
public void exceptionCaught(ChannelHandlerContext ctx, Throwable cause) throws Exception {
cause.printStackTrace();
ctx.close();
}
//服務端處理客戶端websocket請求的核心方法
@Override
protected void messageReceived(ChannelHandlerContext context, Object msg) throws Exception {
// 傳統的HTTP接入
//第一次握手請求消息由HTTP協議承載，所以它是一個HTTP消息，執行handleHttpRequest方法來處理WebSocket握手請求。
if (msg instanceof FullHttpRequest) {
handHttpRequest(context, (FullHttpRequest) msg);
}
// WebSocket接入
// 客戶端通過文本框提交請求消息給服務端，WebSocketServerHandler接收到的是已經解碼後的WebSocketFrame消息。
else if (msg instanceof WebSocketFrame) {
handWebsocketFrame(context, (WebSocketFrame) msg);
}
}
/**
* 處理客戶端向服務端發起http握手請求的業務
*
* @param ctx
* @param req
*/
private void handHttpRequest(ChannelHandlerContext ctx, FullHttpRequest req) {
//如果不是WebSocket握手請求消息，那麽就返回 HTTP 400 BAD REQUEST 響應給客戶端。
if (!req.getDecoderResult().isSuccess()
|| !("websocket".equals(req.headers().get("Upgrade")))) {
sendHttpResponse(ctx, req,
new DefaultFullHttpResponse(HttpVersion.HTTP_1_1, HttpResponseStatus.BAD_REQUEST));
return;
}
//如果是握手請求，那麽就進行握手
WebSocketServerHandshakerFactory wsFactory = new WebSocketServerHandshakerFactory(
WEB_SOCKET_URL, null, false);
handshaker = wsFactory.newHandshaker(req);
if (handshaker == null) {
WebSocketServerHandshakerFactory.sendUnsupportedWebSocketVersionResponse(ctx.channel());
} else {
// 通過它構造握手響應消息返回給客戶端，
// 同時將WebSocket相關的編碼和解碼類動態添加到ChannelPipeline中，用於WebSocket消息的編解碼，
// 添加WebSocketEncoder和WebSocketDecoder之後，服務端就可以自動對WebSocket消息進行編解碼了
handshaker.handshake(ctx.channel(), req);
}
}
/**
* 處理客戶端與服務端之前的websocket業務
*
* @param ctx
* @param frame
*/
private void handWebsocketFrame(ChannelHandlerContext ctx, WebSocketFrame frame) {
//判斷是否是關閉websocket的指令
if (frame instanceof CloseWebSocketFrame) {
handshaker.close(ctx.channel(), (CloseWebSocketFrame) frame.retain());
}
//判斷是否是ping消息
if (frame instanceof PingWebSocketFrame) {
ctx.channel().write(new PongWebSocketFrame(frame.content().retain()));
return;
}
//判斷是否是二進制消息，如果是二進制消息，拋出異常
if (!(frame instanceof TextWebSocketFrame)) {
System.out.println("目前我們不支持二進制消息");
throw new RuntimeException("【" + this.getClass().getName() + "】不支持消息");
}
//返回應答消息
//獲取客戶端向服務端發送的消息
String request = ((TextWebSocketFrame) frame).text();
System.out.println("服務端收到客戶端的消息====>>>" + request);
TextWebSocketFrame tws = new TextWebSocketFrame(new Date().toString()
+ ctx.channel().id()
+ " ===>>> "
+ request);
//群發，服務端向每個連接上來的客戶端群發消息
NettyConfig.group.writeAndFlush(tws);
}
/**
* 服務端向客戶端響應消息
*
* @param ctx
* @param req
* @param res
*/
private void sendHttpResponse(ChannelHandlerContext ctx, FullHttpRequest req,
DefaultFullHttpResponse res) {
// 返回應答給客戶端
if (res.getStatus().code() != 200) {
ByteBuf buf = Unpooled.copiedBuffer(res.getStatus().toString(), CharsetUtil.UTF_8);
res.content().writeBytes(buf);
buf.release();
}
// 如果是非Keep-Alive，關閉連接
ChannelFuture f = ctx.channel().writeAndFlush(res);
if (res.getStatus().code() != 200) {
f.addListener(ChannelFutureListener.CLOSE);
}
}
}
最後，編寫入口程序：啟動WebSocket服務
package com.imooc.netty;
import io.netty.bootstrap.ServerBootstrap;
import io.netty.channel.Channel;
import io.netty.channel.EventLoopGroup;
import io.netty.channel.nio.NioEventLoopGroup;
import io.netty.channel.socket.nio.NioServerSocketChannel;
/**
* 程序的入口，負責啟動應用
* @author liuyazhuang
*
*/
public class Main {
public static void main(String[] args) {
EventLoopGroup bossGroup = new NioEventLoopGroup();
EventLoopGroup workGroup = new NioEventLoopGroup();
try {
ServerBootstrap b = new ServerBootstrap();
b.group(bossGroup, workGroup);
b.channel(NioServerSocketChannel.class);
b.childHandler(new MyWebSocketChannelHandler());
System.out.println("服務端開啟等待客戶端連接....");
Channel ch = b.bind(8888).sync().channel();
ch.closeFuture().sync();
} catch (Exception e) {
e.printStackTrace();
}finally{
//優雅的退出程序
bossGroup.shutdownGracefully();
workGroup.shutdownGracefully();
}
}
}客戶端代碼：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset = utf-8"/>
<title>WebSocket客戶端</title>
<script type="text/javascript">
var socket;
if(!window.WebSocket){
window.WebSocket = window.MozWebSocket;
}
if(window.WebSocket){
socket = new WebSocket("ws://localhost:8888/websocket");
socket.onmessage = function(event){
var ta = document.getElementById(‘responseContent‘);
ta.value += event.data + "\r\n";
};
socket.onopen = function(event){
var ta = document.getElementById(‘responseContent‘);
ta.value = "你當前的瀏覽器支持WebSocket,請進行後續操作\r\n";
};
socket.onclose = function(event){
var ta = document.getElementById(‘responseContent‘);
ta.value = "";
ta.value = "WebSocket連接已經關閉\r\n";
};
}else{
alert("您的瀏覽器不支持WebSocket");
}
function send(message){
if(!window.WebSocket){
return;
}
if(socket.readyState == WebSocket.OPEN){
socket.send(message);
}else{
alert("WebSocket連接沒有建立成功！！");
}
}
</script>
</head>
<body>
<form onSubmit="return false;">
<input type = "text" name = "message" value = ""/>
<br/><br/>
<input type = "button" value = "發送WebSocket請求消息" onClick = "send(this.form.message.value)"/>
<hr color="red"/>
<h2>客戶端接收到服務端返回的應答消息</h2>
<textarea id = "responseContent" style = "width:1024px; height:300px"></textarea>
</form>
</body>
</html>
實際使用WebSocket
上面的例子講解了Netty實現WebSocket，一般我們使用WebSocket不會自己來實現，都是用現成的工具包來進行實現。
我查到的常用的方式有兩種：
- Tomcat實現WebSocket
- 整合Spring實現WebSocket
這一部分我就不再贅述了，等我用到的時候再補教程吧，先mark下相關的博客：
- Tomcat實現
- Spring整合和Tomcat實現
- 基於Java實現
總結
WebSocket最大的特點就是長連接，能夠實時推送數據。
參考鏈接：
- WebSocket知乎問題
- WebSocket原理
- WebSocket原理
- Netty知乎問題
- chunk編碼什麽用
如果文章有錯的地方歡迎指正，大家互相交流。習慣在微信看技術文章的同學，想要獲取更多的Java資源的同學，可以關註微信公眾號:Java3y
WebSocket就是這麽簡單