Netty学习笔记(六) 简单的聊天室功能之WebSocket客户端开发实例
在之前的Netty相关学习笔记中，学习了如何去实现聊天室的服务段，这里我们来实现聊天室的客户端，聊天室的客户端使用的是Html5和WebSocket实现，下面我们继续学习.
创建客户端
接着第五个笔记说，第五个笔记实现了简单的静态资源服务起，那么我们利用这个静态资源服务起为我们提供页面，创建一个socket.html页面，在这个页面中我们实现Socket连接，连接到我们的Netty搭建的聊天服务器上，因此我们需要创建一个聊天页面和Socket连接，这里我们假定Socket连接地址为 http://localhost:8080/socket 我们首先实现页面的开发和Socket的连接。
客户端代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>WebSocket Chat</title>
</head>
<body>
<script type="text/javascript">
var socket;
if (!window.WebSocket) {
window.WebSocket = window.MozWebSocket;
}
if (window.WebSocket) {
socket = new WebSocket("ws://localhost:8080/socket");
socket.onmessage = function (event) {
var ta = document.getElementById('chatContent');
ta.value = ta.value + '\n' + event.data
};
socket.onopen = function (event) {
var ta = document.getElementById('chatContent');
ta.value = "连接开启!";
};
socket.onclose = function (event) {
var ta = document.getElementById('chatContent');
ta.value = ta.value + "连接被关闭";
};
} else {
alert("浏览器不支持 WebSocket！");
}
function send(message) {
if (!window.WebSocket) {
return;
}
if (socket.readyState == WebSocket.OPEN) {
socket.send(message);
} else {
alert("连接没有开启.");
}
}
</script>
<form onsubmit="return false;">
<h1>基于Netty构建的聊天室</h1>
<textarea id="chatContent" style="width: 100%; height: 400px;"/>
<hr>
<input type="text" name="message" style="width: 300px">
<input type="button" value="发送消息" onclick="send(this.form.message.value)">
<input type="button" onclick="javascript:document.getElementById('chatContent').value=''" value="清空记录">
</form>
</body>
</html>
页面效果
启动完成后，输入http://localhost:8080/socket.html 应当可以看到如下的界面，这些方法和第五个笔记的没有什么新得东西，就是新增了一个HTML页面而已.
[
可以看到连接被关闭的字样,这是因为我们的服务端还没有完成，我们将服务端继续改进即可。
完善服务端
在第四个笔记的时候，我们只实现了一个简单的服务端，使用telnet进行测试,我们可以将起拿过来修改一下，为我们所用..
修改内容分析
修改传递类型
在第四篇文章中我们实现了基于String类型的数据，这里我们修改为TextWebSocketFrame 当然相应的返回类型和读取也需要对应修改(这里为了演示，移除了时间，不影响整体逻辑，只是界面效果).x修改后的代码如下:
package com.zhoutao123.simpleChat.html;
import io.netty.channel.Channel;
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;
import static com.zhoutao123.simpleChat.utils.DatetimeUtils.getNowDatetime;
public class TextWebSocketServiceAdapter extends SimpleChannelInboundHandler<TextWebSocketFrame> {
// 创建ChannelGroup 用于保存连接的Channel
public static ChannelGroup channelGroup = new DefaultChannelGroup(GlobalEventExecutor.INSTANCE);
// 当有新的Channel增加的时候
@Override
public void handlerAdded(ChannelHandlerContext ctx) throws Exception {
// 获取当前的Channel
Channel channel = ctx.channel();
// 向其他Channel发送上线消息
channelGroup.writeAndFlush(
new TextWebSocketFrame(String.format("[服务器]\t用户：%s 加入聊天室！\n", channel.remoteAddress())));
// 添加Channel到Group里面
channelGroup.add(channel);
// 向新用户发送欢迎信息
channel.writeAndFlush(
new TextWebSocketFrame(String.format("你好，%s欢迎来到Netty聊天室\n", channel.remoteAddress())));
}
@Override
public void handlerRemoved(ChannelHandlerContext ctx) throws Exception {
// 用户退出后向全部Channel发送下线消息
channelGroup.writeAndFlush(
new TextWebSocketFrame(
String.format("[服务器]\t用户：%s 离开聊天室！\n", ctx.channel().remoteAddress())));
// 移除
channelGroup.remove(ctx.channel());
}
@Override
protected void channelRead0(ChannelHandlerContext ctx, TextWebSocketFrame msg) throws Exception {
// 服务器接收到新的消息后之后执行
// 获取当前的Channel
Channel currentChannel = ctx.channel();
// 遍历
for (Channel channel : channelGroup) {
String sendMessage = "";
// 如果是当前的用户发送You的信息，不是则发送带有发送人的信息
if (channel == currentChannel) {
sendMessage = String.format("[You]\t%s\n", msg.text());
} else {
sendMessage = String.format("[%s]\t %s\n", currentChannel.remoteAddress(), msg.text());
}
channel.writeAndFlush(new TextWebSocketFrame(sendMessage));
}
}
@Override
public void exceptionCaught(ChannelHandlerContext ctx, Throwable cause) throws Exception {
// 发送异常的时候通知移除
Channel channel = ctx.channel();
channelGroup.writeAndFlush(
new TextWebSocketFrame(String.format("[服务器]\t 用户 %s 出现异常掉线！\n", channel.remoteAddress())));
ctx.close();
}
}
新增解码器和编码
既然接收和发送的数据类型改变了，那么我们也要相应的修改解码器和编码器，添加以下代码即可.
package com.zhoutao123.simpleChat.html;
import com.waylau.netty.demo.websocketchat.TextWebSocketFrameHandler;
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;
/**
* 服务端 ChannelInitializer
*
* @author waylau.com
* @date 2015-3-13
*/
public class HttpServerInitializer extends ChannelInitializer<SocketChannel> {
@Override
public void initChannel(SocketChannel ch) throws Exception {
ChannelPipeline pipeline = ch.pipeline();
//将请求和应答消息编码或解码为HTTP消息
pipeline.addLast(new HttpServerCodec());
//将HTTP消息的多个部分组合成一条完整的HTTP消息
pipeline.addLast(new HttpObjectAggregator(64 * 1024));
pipeline.addLast(new ChunkedWriteHandler());
pipeline.addLast(new HttpServerHandleAdapter());
// 添加以下代码
pipeline.addLast(new WebSocketServerProtocolHandler("/socket"));
pipeline.addLast(new TextWebSocketServiceAdapter());
}
}
测试效果
启动服务器,打开聊天界面测试：
可以看到实现了基本的简单的聊天效果,至于压力测试还没有测试，不知道能承载多少个用户，至此我们从丢弃服务到实现在线群聊的实现，大致对Netty有了基本的了解，后期我们将对Netty实现源码级别的学习和了解.
Netty学习笔记(六) 简单的聊天室功能之WebSocket客户端开发实例的更多相关文章
- Netty学习笔记(四) 简单的聊天室功能之服务端开发
前面三个章节,我们使用了Netty实现了DISCARD丢弃服务和回复以及自定义编码解码,这篇博客,我们要用Netty实现简单的聊天室功能. Ps: 突然想起来大学里面有个课程实训,给予UDP还是TCP ...
- 通过WebSocket实现一个简单的聊天室功能
WebSocket WebSocket是一个协议,它是是基于TCP的一种新的网络协议,TCP协议是一种持续性的协议,和HTTP不同的是,它可以在服务器端主动向客户端推送消息.通过这个协议,可以在建立一 ...
- Netty 学习（六）：创建 NioEventLoopGroup 的核心源码说明
Netty 学习(六):创建 NioEventLoopGroup 的核心源码说明 作者: Grey 原文地址: 博客园:Netty 学习(六):创建 NioEventLoopGroup 的核心源码说明 ...
- Netty 学习笔记（1）通信原理
前言 本文主要从 select 和 epoll 系统调用入手,来打开 Netty 的大门,从认识 Netty 的基础原理 —— I/O 多路复用模型开始. Netty 的通信原理 Netty 底层 ...
- Netty学习笔记-入门版
目录 Netty学习笔记 前言 什么是Netty IO基础 概念说明 IO简单介绍 用户空间与内核空间 进程(Process) 线程(thread) 程序和进程 进程切换 进程阻塞 文件描述符 文件句 ...
- ASP.NET Signalr 2.0 实现一个简单的聊天室
学习了一下SignalR 2.0,http://www.asp.net/signalr 文章写的很详细,如果头疼英文,还可以机翻成中文,虽然不是很准确,大概还是容易看明白. 理论要结合实践,自己动手做 ...
- java之jvm学习笔记六-十二(实践写自己的安全管理器)(jar包的代码认证和签名) (实践对jar包的代码签名) (策略文件)(策略和保护域) (访问控制器) (访问控制器的栈校验机制) (jvm基本结构)
java之jvm学习笔记六(实践写自己的安全管理器) 安全管理器SecurityManager里设计的内容实在是非常的庞大,它的核心方法就是checkPerssiom这个方法里又调用 AccessCo ...
- [SignalR]一个简单的聊天室
原文:[SignalR]一个简单的聊天室 1.说明 开发环境:Microsoft Visual Studio 2010 以及需要安装NuGet. 2.添加SignalR所需要的类库以及脚本文件: 3. ...
- Netty学习笔记(二) 实现服务端和客户端
在Netty学习笔记(一) 实现DISCARD服务中,我们使用Netty和Python实现了简单的丢弃DISCARD服务,这篇,我们使用Netty实现服务端和客户端交互的需求. 前置工作 开发环境 J ...
随机推荐
- [Swift]LeetCode337. 打家劫舍 III | House Robber III
The thief has found himself a new place for his thievery again. There is only one entrance to this a ...
- [Swift]LeetCode495. 提莫攻击 | Teemo Attacking
In LOL world, there is a hero called Teemo and his attacking can make his enemy Ashe be in poisoned ...
- Docker 搭建pxc集群 + haproxy + keepalived 高可用（一）
一.首先需要安装好docker,安装方法可以参考之前一篇博文Centos7安装docker [root@localhost ~]# systemctl start docker [root@local ...
- spring aspect获取抽象基类日志
在实际的项目开发过程中我们其实封装了很多的类似BaseService.BaseDao等的基类,然后在切日志的时候我们一般是指向继承改抽象基类的实现类的,这时候我们就会出现无法切出调用抽象基类方法的日志 ...
- MySQL优化配置之query_cache_size
原理MySQL查询缓存保存查询返回的完整结果.当查询命中该缓存,会立刻返回结果,跳过了解析,优化和执行阶段. 查询缓存会跟踪查询中涉及的每个表,如果这写表发生变化,那么和这个表相关的所有缓存都将失效 ...
- 死磕 java集合之ArrayList源码分析
欢迎关注我的公众号"彤哥读源码",查看更多源码系列文章, 与彤哥一起畅游源码的海洋. 简介 ArrayList是一种以数组实现的List,与数组相比,它具有动态扩展的能力,因此也可 ...
- Python爬虫入门教程 12-100 半次元COS图爬取
半次元COS图爬取-写在前面 今天在浏览网站的时候,忽然一个莫名的链接指引着我跳转到了半次元网站 https://bcy.net/ 打开之后,发现也没有什么有意思的内容,职业的敏感让我瞬间联想到了 c ...
- 你的第一个Django程序
本文使用Pycharm.Django 2.0.9.Python 3.6环境,本文大纲 建立Django项目 建立页面 什么是URLconf和ROOT_URLCONF Django怎么处理URL请求 关 ...
- TypeScript 基础知识点整理
一.TypeScript的特点 1.支持ES6规范 2.强大的IDE支持(集成开发环境) 允许为变量指定类型,减少你在开发阶段犯错误的几率. 语法提示,在IDE编写代码时,它会根据你所处的上下文把你能 ...
- python学习第三讲,python基础语法之注释,算数运算符,变量.
目录 python学习第三讲,python基础语法之注释,算数运算符,变量. 一丶python中的基础语法,注释,算数运算符,变量 1.python中的注释 2.python中的运算符. 3.pyth ...