这篇文章主要是增加了一个新的框架就是Netty,实现一个高性能的websocket服务器,并结合前端代码,实现一个基本的聊天功能。你可以根据自己的业务需求进行更改。
这里假设你已经了解了Netty和websocket的相关知识,仅仅是想通过Springboot来整合他们。
废话不多说,直接看步骤代码。
一、环境搭建
其实对于jar包版本的选择,不一定按照我的来,只需要接近即可,最好的办法就是直接去maven网站上去查看,哪一个版本的使用率最高,说明可靠性等等就是最好的。Idea我已经破解,需要的私聊我。
二、整合开发
建立一个Springboot项目
1、添加依赖
2、在application.properties文件修改端口号
一句话:server.port=8081
3、新建service包,创建NettyServer类
import io.netty.bootstrap.ServerBootstrap;
import io.netty.channel.ChannelFuture;
import io.netty.channel.ChannelInitializer;
import io.netty.channel.ChannelOption;
import io.netty.channel.EventLoopGroup;
import io.netty.channel.nio.NioEventLoopGroup;
import io.netty.channel.socket.SocketChannel;
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.stream.ChunkedWriteHandler;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.stereotype.Component;
import javax.annotation.PostConstruct;
@Component
public class NettyServer {
@Value("${server.port}")
private int port;
@PostConstruct
public void start() throws Exception {
EventLoopGroup bossGroup = new NioEventLoopGroup();
EventLoopGroup group = new NioEventLoopGroup();
try {
ServerBootstrap sb = new ServerBootstrap();
sb.option(ChannelOption.SO_BACKLOG, 1024);
sb.group(group, bossGroup)
.channel(NioServerSocketChannel.class)
.localAddress(this.port)
.childHandler(new ChannelInitializer<SocketChannel>() {
@Override
protected void initChannel(SocketChannel ch) throws Exception {
System.out.println("收到新连接:" + ch.localAddress());
ch.pipeline().addLast(new HttpServerCodec());
ch.pipeline().addLast(new ChunkedWriteHandler());
ch.pipeline().addLast(new HttpObjectAggregator(8192));
ch.pipeline().addLast(new WebSocketServerProtocolHandler("/ws", "WebSocket", true, 65536 * 10));
ch.pipeline().addLast(new MyWebSocketHandler());
}
});
ChannelFuture cf = sb.bind(port).sync();
cf.channel().closeFuture().sync();
} finally {
group.shutdownGracefully().sync();
bossGroup.shutdownGracefully().sync();
}
}
}
这个类的代码是模板代码,最核心的就是ch.pipeline().addLast(new MyWebSocketHandler()),其他的如果你熟悉netty的话,可以根据自己的需求配置即可,如果不熟悉直接拿过来用。
4、在service包下创建MyWebSocketHandler核心处理类
import io.netty.channel.ChannelHandlerContext;
import io.netty.channel.SimpleChannelInboundHandler;
import io.netty.channel.group.ChannelGroup;
import io.netty.channel.group.DefaultChannelGroup;
import io.netty.handler.codec.http.websocketx.TextWebSocketFrame;
import io.netty.util.concurrent.GlobalEventExecutor;
public class MyWebSocketHandler extends SimpleChannelInboundHandler<TextWebSocketFrame> {
public static ChannelGroup channelGroup;
static {
channelGroup = new DefaultChannelGroup(GlobalEventExecutor.INSTANCE);
}
// 客户端与服务器建立连接的时候触发
@Override
public void channelActive(ChannelHandlerContext ctx) throws Exception {
System.out.println("与客户端建立连接,通道开启!");
// 添加到channelGroup通道组
channelGroup.add(ctx.channel());
}
// 客户端与服务器关闭连接的时候触发
@Override
public void channelInactive(ChannelHandlerContext ctx) throws Exception {
System.out.println("与客户端建立连接,通道关闭!");
channelGroup.remove(ctx.channel());
}
// 服务器接受客户端的数据信息
@Override
protected void channelRead0(ChannelHandlerContext ctx, TextWebSocketFrame msg) throws Exception {
System.out.println("服务器收到的数据:" + msg.text());
sendMessage(ctx, msg);
sendAllMessage();
}
// 给固定的人发消息
private void sendMessage(ChannelHandlerContext ctx, TextWebSocketFrame msg) {
String message = msg.text() + " --- 你好," + ctx.channel().localAddress() + " 给固定的人发消息";
ctx.channel().writeAndFlush(new TextWebSocketFrame(message));
}
// 发送群消息,此时其他客户端也能收到群消息
private void sendAllMessage() {
String message = "我是服务器,这里发送的是群消息";
channelGroup.writeAndFlush(new TextWebSocketFrame(message));
}
}
在这个类里面我们首先建立了一个channelGroup,每当有客户端连接的时候,就添加到channelGroup里面,我们可以发送消息给固定的人,也可以群发消息。
注意:有人说这个功能没有实现后台主动推送的功能。其实代码写到这一步,你可以使用定时器来实现定时推送的功能,另外为了解决跨域的问题,你也可以使用nginx配置反向代理。我这里只是一个基本的功能,没有使用nginx。
5、客户端代码
因为现在Vue比较流行,所以客户端是用Vue写的一个Component,如果你对Vue不了解了话,那你需要去学习一下啊
新建一个WebSocket.vue的Componet,代码如下:
<template>
<div class="hello">
<form onSubmit="return false;">
<hr color="black">
<h3>客户端发送信息</h3>
<label>名字</label><input type="text" name="uid" value="10001" v-model="uid" />
<label>内容</label><input type="text" name="message" value="hello, I am ZZ." v-model="message" />
<br>
<input type="button" value="click to send" @click="sendMsg()" />
<hr color="black">
<h3>服务端返回的应答消息</h3>
<textarea id="responseText" style="width: 900px; height: 300px;"></textarea>
</form>
</div>
</template>
<script>
export default {
name: 'WebSocket',
data () {
return {
socket: null,
uid: '10001',
message: 'hello, I am ZZ.'
}
},
mounted() {
this.initSocket();
},
methods: {
initSocket: function() {
var socket;
if(!window.WebSocket) {
window.WebSocket = window.MozWakeLock;
}
if(window.WebSocket) {
socket = new WebSocket("ws://localhost:8099/ws");
socket.onmessage = function(event) {
var ta = document.getElementById("responseText");
ta.value += event.data + "\r\n";
};
socket.onopen = function(event) {
var ta = document.getElementById("responseText");
ta.value = "已连接\r\n";
};
socket.onclose = function(event) {
var ta = document.getElementById("responseText");
ta.value = "已关闭";
};
this.socket = socket;
} else {
alert("您的浏览器不支持WebSocket协议!");
}
},
sendMsg: function () {
console.log(this.socket);
if(this.socket.readyState == WebSocket.OPEN) {
this.socket.send(this.uid + ':' + this.message);
} else {
alert("WebSocket 连接没有建立成功!");
}
}
}
}
</script>
<style scoped lang="scss">
</style>
现在一切就绪,运行服务器和客户端,然后再打开我们的网页。看一下效果:
OK,这就是一个最基本的功能,所有的测试均在我自己的电脑上测试通过,如有问题还请指正