TIO-websoket-showcase 学习笔记

最新推荐文章于 2024-05-13 09:48:06 发布

gwcgwcjava

最新推荐文章于 2024-05-13 09:48:06 发布

阅读量3.3k

点赞数 1

本文链接：https://blog.csdn.net/gwcgwcjava/article/details/84337241

版权

tio 同时被 3 个专栏收录

3 篇文章 0 订阅

订阅专栏

maven

1 篇文章 0 订阅

订阅专栏

websocket

1 篇文章 0 订阅

订阅专栏

备注：

tio-core 版本 3.2.2

jdk 1.8.161

maven 环境

下载地址：https://gitee.com/tywo45/tio-websocket-showcase

下载后导入eclipse，如下

前提是配置好maven环境

然后执行 maven clean 清理项目

然后执行maven install 打包项目

如果都是success ，那么说明项目运行环境完全OK

启动测试项目

找到ShowcaseWebsocketStarter类，该类是该工程的启动类

里面有main方法，右键-run as -java application

启动过程如下：


2018-11-22 12:43:16,522 INFO  org.tio.server.TioServer[158]: 
|----------------------------------------------------------------------------------------|
| Tio gitee address | https://gitee.com/tywo45/t-io                                      |
| Tio site address  | https://t-io.org/                                                  |
| Tio version       | 3.2.2.v20181122-RELEASE                                            |
| ---------------------------------------------------------------------------------------|
| GroupContext name | Tio Http Server                                                    |
| Started at        | 2018-11-22 12:43:16                                                |
| Listen on         | 0.0.0.0:80                                                         |
| Main Class        | org.tio.showcase.websocket.server.ShowcaseWebsocketStarter         |
| Jvm start time    | 659 ms                                                             |
| Tio start time    | 33 ms                                                              |
| Pid               | 12800                                                              |
|----------------------------------------------------------------------------------------|

2018-11-22 12:43:16,529 INFO  org.tio.server.TioServer[158]: 
|----------------------------------------------------------------------------------------|
| Tio gitee address | https://gitee.com/tywo45/t-io                                      |
| Tio site address  | https://t-io.org/                                                  |
| Tio version       | 3.2.2.v20181122-RELEASE                                            |
| ---------------------------------------------------------------------------------------|
| GroupContext name | showcase                                                           |
| Started at        | 2018-11-22 12:43:16                                                |
| Listen on         | 0.0.0.0:9326                                                       |
| Main Class        | org.tio.showcase.websocket.server.ShowcaseWebsocketStarter         |
| Jvm start time    | 666 ms                                                             |
| Tio start time    | 1 ms                                                               |
| Pid               | 12800                                                              |
|----------------------------------------------------------------------------------------|

服务器端口为：80

在浏览器访问：http://localhost

显示如下界面：

出现这个界面，说明已经启动成功啦！

那接下来就爽一把，聊天试试吧！

是不是很爽，运行成功啦！

展示tio-websocket的用法，t-io官方提供的唯一tio-websocket示范教程，包括wss和监控等高级特性

这是官方对showcase的描述

那么我们就进行下一步探索吧！

不能不说谭总是个良心开源架构师！

查看分析源码

分析源码怎么入手呢，还是从启动入口开始

ShowcaseWebsocketStarter 工程的启动类：

showcase 涉及到两块：tio-http 和tio-websocket

话分两路：

先说tio-http的运行过程：

	public static void main(String[] args) throws Exception {
		//启动http server，这个步骤不是必须的，但是为了用页面演示websocket，所以先启动http
		P.use("app.properties");
		
		
		if (P.getInt("start.http", 1) == 1) {
			HttpServerInit.init();
		}
		
		//启动websocket server
		start();
	}

这段代码指定了要用到的配置文件：app.properties

配置文件中有是否启动http服务：start.http ,如果为1，那么就是启动HTTp服务，

首先通过HttpServerInit类，即http 初始化配置类，调用init 初始化方法

该方法中初始化配置完成后，即启动了http服务：

关键代码如下：

	public static void init() throws Exception {
		//		long start = SystemTimer.currTime;

		int port = P.getInt("http.port");//启动端口
		String pageRoot = P.get("http.page");//html/css/js等的根目录，支持classpath:，也支持绝对路径
		httpConfig = new HttpConfig(port, null, null, null);
		httpConfig.setPageRoot(pageRoot);
		httpConfig.setMaxLiveTimeOfStaticRes(P.getInt("http.maxLiveTimeOfStaticRes"));
		httpConfig.setPage404(P.get("http.404"));
		httpConfig.setPage500(P.get("http.500"));
		httpConfig.setUseSession(false);
		httpConfig.setCheckHost(false);

		requestHandler = new DefaultHttpRequestHandler(httpConfig, HttpServerShowcaseStarter.class);//第二个参数也可以是数组

		httpServerStarter = new HttpServerStarter(httpConfig, requestHandler);
		serverGroupContext = httpServerStarter.getServerGroupContext();
		httpServerStarter.start(); //启动http服务器

	}

该初始化配置代码主要是从配置文件中获取http的初始化配置信息，比如端口，静态资源路径，404,500界面地址等信息

最关键的是，可以配置自己的Handler类，这个类是需要实现HttpRequestHandler接口。

该实例中使用的是tio-server包中默认的DefaultHttpRequestHandler类，默认的处理类，

所有的http请求都会经过该类的handler方法进行处理过滤，相当于springmvc中的过滤器。

通过httpconfig和requestHandler 初始化HttpServerStarter类

HttpServerStarter类是 tio-http包的启动类，该类根据配置信息初始化了tioServer类

httpServerStarter.start();是启动Http服务的地方

其实最终还是启动的TioServer,

http服务器启动后，会发现根据配置文件，端口是80 ，那么直接在浏览器访问：

http://localhost就能访问到http服务的默认欢迎界面index.html

到此，http服务就启动成功了，

问题：

系统默认的欢迎页是index.html ,那么是否可以自己设置呢，答案是可以的，在httpConfig中有一个防范

httpConfig.setWelcomeFile就可以修改默认的欢迎界面了

那么http启动成功了，就能显示界面了，那么发送信息，显示信息是怎么实现的呢，

那就用到了我们的猪脚：websocket

tio-websocket是非常棒的，开始登场了！

还是从开始启动说起：

在启动类中的main方法中，

	public static void main(String[] args) throws Exception {
		//启动http server，这个步骤不是必须的，但是为了用页面演示websocket，所以先启动http
		P.use("app.properties");
		
		
		if (P.getInt("start.http", 1) == 1) {
			HttpServerInit.init();
		}
		
		//启动websocket server
		start();
	}

这个最下面的start();就是启动websokect服务的，接着往下缕

这个方法实现了什么呢，看代码：

	public static void start() throws Exception {
		ShowcaseWebsocketStarter appStarter = new ShowcaseWebsocketStarter(ShowcaseServerConfig.SERVER_PORT, ShowcaseWsMsgHandler.me);
		appStarter.wsServerStarter.start();
	}

这个方法很简单，就两行代码

首先初始化了一下自己，new了一个新的对象，

重点是在new新对象的时候，创建了一个叫WsServerStarter的对象，这个对象才是整个事件的猪脚，

这个对象的start()方法才是真正的启动websocket服务。

那么构造方法中都干了啥：

看代码：

public ShowcaseWebsocketStarter(int port, ShowcaseWsMsgHandler wsMsgHandler) throws Exception {
		wsServerStarter = new WsServerStarter(port, wsMsgHandler);

		serverGroupContext = wsServerStarter.getServerGroupContext();
		serverGroupContext.setName(ShowcaseServerConfig.PROTOCOL_NAME);
		serverGroupContext.setServerAioListener(ShowcaseServerAioListener.me);

		//设置ip监控
		serverGroupContext.setIpStatListener(ShowcaseIpStatListener.me);
		//设置ip统计时间段
		serverGroupContext.ipStats.addDurations(ShowcaseServerConfig.IpStatDuration.IPSTAT_DURATIONS);
		
		//设置心跳超时时间
		serverGroupContext.setHeartbeatTimeout(ShowcaseServerConfig.HEARTBEAT_TIMEOUT);
		
		if (P.getInt("ws.use.ssl", 1) == 1) {
			//如果你希望通过wss来访问，就加上下面的代码吧，不过首先你得有SSL证书（证书必须和域名相匹配，否则可能访问不了ssl）
			String keyStoreFile = "classpath:config/ssl/keystore.jks";
			String trustStoreFile = "classpath:config/ssl/keystore.jks";
			String keyStorePwd = "214323428310224";
			serverGroupContext.useSsl(keyStoreFile, trustStoreFile, keyStorePwd);
		}
	}

分析一下：

该构造方法有两个参数：

port:websocket的端口

wsMsgHandler:websocket的处理类

等等，wsMsgHandler是什么鬼

暂且知道这是websocket的处理类

wsServerStarter = new WsServerStarter(port, wsMsgHandler);

该代码的意思是创建了一个新的wsServerStarter对象

下面的代码都是配置gropcontext

配置完这些后，就启动wsServer了

appStarter.wsServerStarter.start();

启动以后是怎么工作的呢：

首先我们知道初始化的时候绑定了端口：9326

也就是说，websocket会监听9326，那怎么实现的web端跟服务端通讯呢，这是关键

接下来看看web端有哪些东西

首先是index.html

<body>
    <div id="app">
        <iframe src="./im.html" style="width:500px; height:850px;"></iframe>
        <iframe src="./im.html" style="width:500px; height:850px;"></iframe>

    </div>

</body>

该界面就是一个iframe框架

引入的界面是im.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>IM Now！</title>
<link rel="stylesheet" type="text/css" href="im.css" />
</head>
<body>
	<div id="container">
		<div class="header">
			<span style="float: left;">微信聊天界面</span> <span id="mtime"
				style="float: right;"></span>
		</div>
		<ul class="content">

		</ul>
		<div class="footer">
			<div id="user_face_icon">
				<img src="image/t2.jpg" alt="">
			</div>
			<input id="messageText" type="text" placeholder="说点什么吧...">
			<span id="btn" onclick="sendMsg()">发送</span>
		</div>
	</div>
	<script src="./tio/tiows.js"></script>
	<script src="./name.js"></script>
	<script src="./imHandler.js"></script>
	<script src="./im.js"></script>
</body>
</html>

这个界面展示的是一个聊天的界面，展示和发送

关键是引入了四个文件：

分别是干啥用的呢？

tiows.js

gwcgwcjava

关注

1
点赞
踩
8

收藏

觉得还不错? 一键收藏
3
评论
TIO-websoket-showcase 学习笔记

备注：tio-core 版本 3.2.2 jdk 1.8.161maven 环境下载地址：https://gitee.com/tywo45/tio-websocket-showcase下载后导入eclipse，如下前提是配置好maven环境然后执行 maven clean 清理项目然后执行maven install 打包项目如果都是success ，那么...
复制链接

扫一扫