WebSocket学习之路（一）
目录
- WebSocket出现的原因
- WebSocket环境的搭建
WebSocket出现的原因
Http虽然是互联网的基础，但http协议采用的是请求响应模型，一次请求对应一次响应。服务器无法主动把资源发送到客户端浏览器中。一但遇到需要服务器不断的推送资源的场景，http不得不采用一些其它方式来满足应用场景的需要。
在股票交易的应用场景中，客户端浏览器需要不断的获得股票的实时数据，比如价格。但由于采用的是http协议，所以服务端无法主动把最新的股票数据发送给浏览器客户端，因为http采用的是请求响应模型。为了获股票的实时数据，浏览器客户端必须不断的向服务器请求股票数据，在渲染到页面上。这不断的请求就是轮询。通过把ajax放在setInterval中，不断的执行请求，从服务获取实时数据，从而实现一种轮询。除了轮询外，还可以使用http的Keep Alive机制，来不断获取数据数据（还有其它方式获取实时数据）。
虽然有很多基于http协议的解决方式，但http连接是个昂贵的连接，特别耗费资源。http协议是应用层协议，是基于传输层协议TCP的，TCP的每一次连接建立，都需要3次握手。而在没有长连接的时代，一个http连接对应一个TCP连接。使用轮询的效率必定很低。因为一次TCP连接需要三次握手，一次握手假如耗费1ms，那么三次就是3ms。股票的交易的实时数据的在多次轮询下，也就不在实时。虽然有长连接，但服务器维护长连接也会消耗资源，并且每一次http报文都要携带很多重复信息，会把流量消耗在不必要的地方。因此WebSocket出现，一次连接后能让服务器主动的推送数据到客户端浏览器。
WebSocket环境的搭建
运行环境| 项目 | 版本 |
|---|---|
| windows操作系统 | 10 |
| java | 1.8 |
| tomcat | 9.0.5 |
| maven | 3.8 |
依赖包
| 包 | 版本 | 是否必要 |
|---|---|---|
| javaee-api | 7.0 | yes |
pom.xml配置文件
点击查看代码
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<groupId>org.example</groupId>
<artifactId>WebSocket</artifactId>
<version>1.0-SNAPSHOT</version>
<dependencies>
<dependency>
<groupId>javax.websocket</groupId>
<artifactId>javax.websocket-api</artifactId>
<version>1.1</version>
<scope>provided</scope>
</dependency>
<dependency>
<groupId>javax</groupId>
<artifactId>javaee-api</artifactId>
<version>7.0</version>
</dependency>
</dependencies>
</project>
项目目录结构：
服务端测试代码：
点击查看代码
import javax.websocket.OnMessage;
import javax.websocket.server.ServerEndpoint;
import java.util.Date;
@ServerEndpoint("/echo")
public class EchoServer {
@OnMessage
public String demo(String S){
Date date = new Date();
System.out.println(S);
return date.toString()+S;
}
}
客户端测试代码：浏览器客户端
点击查看代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>
ada
</div>
</body>
<script>
var web ;
function init(){
var wsURL = 'ws://localhost:8080/WebSocket_war_exploded/echo';
web = new WebSocket(wsURL);
web.onopen = function (evt){
let id = parseInt(Math.random()*100) ;
console.log("连接")
web.send("hh我是："+id);
}
web.onmessage = function (evt){
console.log(evt.data);
console.log("aa");
web.close();
}
}
init();
</script>
</html>
运行效果
客户端:
服务端：
环境搭建成功
标签：web,http,学习,WebSocket,浏览器,连接,客户端 From： https://www.cnblogs.com/aoCat/p/16971371.html