扩展篇】四. WebSocket简单介绍和使用

最新推荐文章于 2024-04-27 15:40:08 发布

杰KaMi

最新推荐文章于 2024-04-27 15:40:08 发布

阅读量844

点赞数 1

分类专栏：学习文章标签： websocket netty 网络协议

本文链接：https://blog.csdn.net/TheNew_One/article/details/105583852

版权

学习专栏收录该内容

25 篇文章 0 订阅

订阅专栏

WebSocket

篇幅较长，请配合目录观看
项目准备
1. 什么是WebSocket
2. WebSocket帧
- 2.1 数据帧 -- 用来传递数据
- 2.2 状态帧 -- 用来检测心跳
3. 使用Netty搭建WebSocket服务器
4. 完善通讯功能

中国加油，武汉加油！

篇幅较长，请配合目录观看

项目准备

本案例基于扩展篇】三. Netty基本介绍及使用

1. 什么是WebSocket

http协议只能由客户端发起，服务端无法直接进行推送。这就导致了如果服务端有持续变化，客户端想要获知就很麻烦。
WebSocket协议就是为了解决这个给问题应运而生。通过该协议，服务端和客户端都可以主动推送信息。
推送的消息可以是文本也可以是二进制数据。而且没有同源策略的限制，不存在跨域问题。
协议的标识是ws。
WebStocket是H5之后提供的一种网络通讯技术，属于应用层协议。基于TCP传输协议，并复用HTTP的握手通道。

2. WebSocket帧

2.1 数据帧 – 用来传递数据

TextWebSocketFrame 文本帧
BinaryWebSocketFrame 二进制帧

2.2 状态帧 – 用来检测心跳

PingWebSocketFrame ping帧
PongWebSocketFrame pong帧
CloseWebSocketFrame 关闭帧

3. 使用Netty搭建WebSocket服务器

3.1 新建项目web-socket-demo（maven）

3.2 导包

<dependency>
    <groupId>io.netty</groupId>
    <artifactId>netty-all</artifactId>
    <version>4.1.48.Final</version>
</dependency>

3.3 编写Handler

package com.wpj;

import io.netty.channel.ChannelHandlerContext;
import io.netty.channel.SimpleChannelInboundHandler;
import io.netty.handler.codec.http.websocketx.TextWebSocketFrame;

public class WebSocketChannelHandler extends SimpleChannelInboundHandler<TextWebSocketFrame>{
    @Override
    protected void channelRead0(ChannelHandlerContext channelHandlerContext, TextWebSocketFrame textWebSocketFrame) throws Exception {
        System.out.println("读取客户端的内容："+textWebSocketFrame.text());
    }

    @Override
    public void channelRegistered(ChannelHandlerContext ctx) throws Exception {
        System.out.println("新客户端连接。。。");
    }

    @Override
    public void channelUnregistered(ChannelHandlerContext ctx) throws Exception {
        System.out.println("客户断开连接。。。");
    }
}

3.4 编写服务端

package com.wpj;

import io.netty.bootstrap.ServerBootstrap;
import io.netty.channel.*;
import io.netty.channel.nio.NioEventLoopGroup;
import io.netty.channel.socket.nio.NioServerSocketChannel;
import io.netty.handler.codec.http.HttpObjectAggregator;
import io.netty.handler.codec.http.HttpServerCodec;
import io.netty.handler.codec.http.websocketx.WebSocketServerProtocolHandler;

public class websocketServer {
    public static void main(String[] args) {
        try {
            EventLoopGroup master = new NioEventLoopGroup();
            EventLoopGroup slave = new NioEventLoopGroup();

            ServerBootstrap bootstrap = new ServerBootstrap();
            bootstrap.group(master, slave);
            bootstrap.channel(NioServerSocketChannel.class);
            bootstrap.childHandler(new ChannelInitializer() {
                @Override
                protected void initChannel(Channel channel) throws Exception {
                    ChannelPipeline pipeline = channel.pipeline();
                    pipeline.addLast(new HttpServerCodec()); // 解码HttpRequest
                    pipeline.addLast(new HttpObjectAggregator(1024*10)); // 加密FullHttpRequest
                    // 添加WebSocket解编码
                    pipeline.addLast(new WebSocketServerProtocolHandler("/"));
                    // 添加处理客户端的请求的处理器
                    pipeline.addLast(new WebSocketChannelHandler());
                }
            });
            ChannelFuture channelFuture= bootstrap.bind(8080);
            channelFuture.sync();
            System.out.println("服务端启动成功。。。");
        } catch (InterruptedException e) {
            e.printStackTrace();
        }
    }
}

3.5 新建前端项目web-scoket-demo

3.5.1 用HBuilder新建jquery.js

3.5.2 编辑index.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script type="text/javascript" src="js/jquery.js"></script>
		<script type="text/javascript">
			$(function(){
				if(window.WebSocket) {
					var ws = new WebSocket("ws://localhost:8080/");
				} else {
					aler("不支持websocket");
				}
			})
		</script>
	</head>
	<body>
		<div style="width: 400px;height: 400px; border: 1px solid black;">
			
		</div>
		<input type="text" id="content" />
		<button>发送</button>
	</body>
</html>

在这里插入图片描述

4. 完善通讯功能

4.1 完善Handler

package com.wpj;

import io.netty.channel.ChannelHandlerContext;
import io.netty.channel.SimpleChannelInboundHandler;
import io.netty.handler.codec.http.websocketx.TextWebSocketFrame;

public class WebSocketChannelHandler extends SimpleChannelInboundHandler<TextWebSocketFrame>{
    @Override
    protected void channelRead0(ChannelHandlerContext channelHandlerContext, TextWebSocketFrame textWebSocketFrame) throws Exception {
        String text = textWebSocketFrame.text();
        System.out.println("读取客户端的内容："+ text);
        if("heard".equals(text)) {
            TextWebSocketFrame textWebSocketFrame1 = new TextWebSocketFrame("heard");
            channelHandlerContext.channel().writeAndFlush(textWebSocketFrame1);
            return;
        }
        TextWebSocketFrame textWebSocketFrame1 = new TextWebSocketFrame("嗯！");
        channelHandlerContext.channel().writeAndFlush(textWebSocketFrame1);
    }
    @Override
    public void channelRegistered(ChannelHandlerContext ctx) throws Exception {
        System.out.println("新客户端连接。。。");
    }
    @Override
    public void channelUnregistered(ChannelHandlerContext ctx) throws Exception {
        System.out.println("客户断开连接。。。");
    }
}

4.2 完善服务端

package com.wpj;

import io.netty.bootstrap.ServerBootstrap;
import io.netty.channel.*;
import io.netty.channel.nio.NioEventLoopGroup;
import io.netty.channel.socket.nio.NioServerSocketChannel;
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.timeout.ReadTimeoutHandler;

import java.util.concurrent.TimeUnit;

public class websocketServer {
    public static void main(String[] args) {
        try {
            EventLoopGroup master = new NioEventLoopGroup();
            EventLoopGroup slave = new NioEventLoopGroup();

            ServerBootstrap bootstrap = new ServerBootstrap();
            bootstrap.group(master,slave);
            bootstrap.channel(NioServerSocketChannel.class);
            bootstrap.childHandler(new ChannelInitializer() {
                @Override
                protected void initChannel(Channel channel) throws Exception {
                ChannelPipeline pipeline = channel.pipeline();
                pipeline.addLast(new HttpServerCodec()); // 解码HttpRequest
                pipeline.addLast(new HttpObjectAggregator(1024*10)); // 加密FullHttpRequest
                // 添加WebSocket解编码
                pipeline.addLast(new WebSocketServerProtocolHandler("/"));
                // 客户端n秒后不发送信息自动断开
                pipeline.addLast(new ReadTimeoutHandler(10, TimeUnit.SECONDS));
                // 添加处理客户端的请求的处理器
                pipeline.addLast(new WebSocketChannelHandler());
                }
            });
            ChannelFuture channelFuture= bootstrap.bind(8080);
            channelFuture.sync();
            System.out.println("服务端启动成功。。。");
        } catch (InterruptedException e) {
            e.printStackTrace();
        }
    }
}

4.3 完善index.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script type="text/javascript" src="js/jquery.js"></script>
		<script type="text/javascript">
			var ws 
			$(function(){
				
				if(window.WebSocket) {
					ws = new WebSocket("ws://localhost:8080/");
					ws.onopen = function(){
						$("#showMsg").append("<span style='color:green'>客户端连接成功</span><br />");
						sendHeard();
						closeConn();
					};
					ws.onclose = function(){
						// 清除心跳任务
						clearInterval(sendHeardTime);
						$("#showMsg").append("<span style='color:red'>客户端断开连接</span><br />");
					};
					ws.onmessage = function(resp){
						var data = resp.data;
						if(resp.data == "heard"){
							console.info(data);
							// 清除定时关闭的连接
							clearTimeout(closeConnTime);
							closeConn();
							return;
						}
						$("#showMsg").append("<span style='float:right'>"+data+"</span><br />");
					};
				} else {
					alert("不支持websocket");
				}
			})
			function sendMsg(){
				var msg = $("#content").val();
				ws.send(msg);
				$("#showMsg").append("<span>我: "+msg+"</span><br />");
			}
			// 5s发送一个心跳
			var sendHeardTime;
			function sendHeard(){
				sendHeardTime = setInterval(function(){
					ws.send("heard");
				}, 5000);
			}
			var closeConnTime;
			// 关闭连接
			function closeConn(){
				closeConnTime = setTimeout(function(){
					ws.close();
				}, 10000);
			}
		</script>
	</head>
	<body>
		<div id="showMsg" style="width: 400px;height: 200px; border: 1px solid black;">
			
		</div>
		<input type="text" id="content" />
		<button onclick="sendMsg()">发送</button>
	</body>
</html>