Websocket入門コード
5279 ワード
リアルタイム通信 Ajax輪訓 非同期の一定時間ごとにサーバに要求 を送信する.
Long pull Ajaxリクエストのように、ブロックされた方法であり、リクエストサーバ側は、サーバ応答 を待機する.
websocket HTTPプロトコルに基づく永続化プロトコル WebSocketは、HTML 5が提供し始めた単一のTCP接続上でフルデュプレクス通信を行うプロトコルである. WebSocketは、クライアントとサーバ間のデータ交換をより簡単にし、サービス側がクライアントにデータを積極的にプッシュできるようにします.WebSocket APIでは、ブラウザとサーバが握手を1回完了するだけで、両者の間に永続的な接続を直接作成し、双方向のデータ転送を行うことができます.
サービス側実装コード
クライアント実装コード
サービス側実装コード
public class WSServer {
public static void main(String[] args) throws InterruptedException {
EventLoopGroup mainGroup = new NioEventLoopGroup();
EventLoopGroup subGroup = new NioEventLoopGroup();
try {
ServerBootstrap server = new ServerBootstrap();
server.group(mainGroup,subGroup)
.channel(NioServerSocketChannel.class)
.childHandler(new WSServerInitializer());
ChannelFuture channelFuture = server.bind(8080).sync();
channelFuture.channel().closeFuture().sync();
} finally {
mainGroup.shutdownGracefully();
subGroup.shutdownGracefully();
}
}
}
public class WSServerInitializer extends ChannelInitializer {
@Override
protected void initChannel(SocketChannel ch) throws Exception {
ChannelPipeline pipeline = ch.pipeline();
// websocket http , http
pipeline.addLast(new HttpServerCodec());
//
pipeline.addLast(new ChunkedWriteHandler());
// httpMessage , FullHttpRequest fullHttpResponse
pipeline.addLast(new HttpObjectAggregator(1024*64));
// ----------------- HTTP ------------------
// websocket , , : /ws
// handler
// : handshaking(close,ping,pong) ping+pong=
// websocket , frames , frames
pipeline.addLast(new WebSocketServerProtocolHandler("/ws"));
// handler
pipeline.addLast(new ChatHandler());
}
}
/**
* @author: webin
* @date: 2020/4/4 15:57
* @description: handler
* TextWebSocketFrame: netty , websocket ,frame
* @version: 0.0.1
*/
public class ChatHandler extends SimpleChannelInboundHandler {
/** channel, channel */
private static ChannelGroup clients = new DefaultChannelGroup(GlobalEventExecutor.INSTANCE);
@Override
protected void channelRead0(ChannelHandlerContext channelHandlerContext, TextWebSocketFrame msg) throws Exception {
//
String text = msg.text();
System.out.println(" : " + text);
for (Channel channel : clients) {
channel.writeAndFlush(
new TextWebSocketFrame("[ :]"+ LocalDateTime.now()+" , : "+text)
);
}
//
// clients.writeAndFlush(
// new TextWebSocketFrame("[ :]"+ LocalDateTime.now()+" , : "+text)
// );
}
/**
*
* channel, channelGroup
* @param ctx
* @throws Exception
*/
@Override
public void handlerAdded(ChannelHandlerContext ctx) throws Exception {
clients.add(ctx.channel());
}
@Override
public void handlerRemoved(ChannelHandlerContext ctx) throws Exception {
// handlerRemoved,ChannelGroup Channel
clients.remove(ctx.channel());
System.out.println(" ,channel id:" + ctx.channel().id().asLongText());
System.out.println(" ,channel id:" + ctx.channel().id().asShortText());
}
}
クライアント実装コード
Title
:
:
window.CHAT = {
socket: null,
init: function () {
if (window.WebSocket) {
CHAT.socket = new WebSocket("ws://127.0.0.1:8080/ws");
CHAT.socket.onopen = function() {
console.log(" ...")
}
CHAT.socket.onmessage = function(e) {
console.log(" : " + e.data)
var receiveMsg = document.getElementById("receiveMsg");
var html = receiveMsg.innerHTML;
receiveMsg.innerHTML = html + "<br/>" + e.data
};
CHAT.socket.close = function() {
console.log(" ...")
};
CHAT.socket.onerror = function () {
console.log(" ... ")
}
} else {
alert(" WebSocket ")
}
},
chat: function () {
var msg = document.getElementById("msgContent")
CHAT.socket.send(msg.value)
}
}
CHAT.init();