WebSocket简单调用

WebSocket是一种在单个TCP连接上进行全双工通信的协议。WebSocket使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在WebSocked API中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。

背景：很多网站为了实现推送技术，所用的技术都是轮询。轮询是在特定的事件间隔，由浏览器发出HTTP请求，然后由服务器返回最新的数据给客户端浏览器。这种传统的模式有很明显的缺点，即浏览器需要不断的向服务器发出请求，然而HTTP请求可能包含较长的头部，其中真正有效的数据可能只是很小的一部分，显然这样会浪费很多的带宽等资源。
而比较新的技术去做轮询的效果是Comet。这种技术虽然可以双向通信，但仍然需要反复发出请求，而且在Comet中普遍采用的长链接，也会消耗服务器资源。
这种情况下，HTML5定义了WebSocket协议，能更好的节省服务器资源和带宽，并且能够实时的进行通信。

Http请求头添加属性

Connection: Upgrade // 客户端希望连接升级
Upgrade: websocket // 升级到Websocket协议

 <body>输入：<br/><input id="text" type="text"/><button onclick="send()">发送消息</button><hr/><button onclick="closeWebSocket()">关闭连接</button><hr/></body><script type="text/javascript">var websocket = null;// 判断当前浏览器是否支持WebSocketif ('WebSocket' in window) {websocket = new WebSocket("ws://localhost:9082/ws/123");} else {alert('Not support Websocket')}// 发生错误的回调方法websocket.onerror = function () {alert("WebSocket连接发生错误");};// 成功建立的回调方法websocket.onopen = function () {alert("WebSocket连接成功");}// 接收到消息的回调方法websocket.onmessage = function (event) {alert(event.data);}// 连接关闭的回调方法websocket.onclose = function () {alert("WebSocket连接关闭");}// 监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常window.onbeforeunload = function () {websocket.close();}// 发送消息function send() {var message = document.getElementById('text').value;websocket.send(message);}</script>

添加依赖

 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-websocket</artifactId></dependency>

后端

@Configuration
public class WebSocketConfig {@Beanpublic ServerEndpointExporter serverEndpointExporter() {return new ServerEndpointExporter();}
}@Component
@ServerEndpoint("/ws/{name}")
public class WebSocketTest {Logger log = LoggerFactory.getLogger(this.getClass());private static Map<String, WebSocketTest> webSocketSet = new ConcurrentHashMap<>();private Session session;private String name;@OnOpenpublic void onOpen(Session session, @PathParam("name") String name) {this.session = session;this.name = (name == null || name.length() == 0) ? UUID.randomUUID().toString() : name;// 将新连接放入SetwebSocketSet.put(name, this);log.info("WebSocket有新的客户端连接:{}, 当前连接数为:{}", name, webSocketSet.size());}@OnClosepublic synchronized void onClose() {// 清除当前连接webSocketSet.remove(name);log.info("WebSocket:{}已关闭, 当前连接数为:{}", name, webSocketSet.size());}@OnMessagepublic void onMessage(String message) {log.info("接收到webSocket消息client:{}, message:{}", name, message);try {webSocketSet.get(name).session.getBasicRemote().sendText(message);} catch (IOException e) {log.error("WebSocket发送消息失败！from{}, to{}, error{}", this.name, name, e.getMessage());}// 群发webSocketSet.forEach((name, ws) -> {try {ws.session.getBasicRemote().sendText(message);} catch (IOException e) {log.error("WebSocket群发送消息失败！from{}, to{}, error{}", this.name, name, e.getMessage());}});log.info("WebSocket群发送消息, from:{}", this.name);}
}

Socket 是传输控制层协议，WebSocket 是应用层协议。

WebSocket简单调用相关推荐

WebSocket简单使用(二) - 客户端
WebSocket简单使用(二) - 客户端原文 http://www.oseye.net/user/kevin/blog/79 关于WebSocket我打算分如下几篇博文来探探路: WebSock ...
mysql查询并设置高亮_Thinkphp3.2.3设置MySql主从读写分离后，简单调用主数据库查询
图/文:迷神 Thinkphp是一款不错的国产框架,使用范围广,应用也比较多.随着网站访问增大往往需要使用mysql主从同步功能,本身Thinkphp自带了主从读写分离的功能了. 但是我们经常有一个场 ...
C#简单调用FMU ，进行仿真计算
C#简单调用FMU ,进行仿真计算 FMU导入及调用使用Femyou 我使用WPF创建了一个简单的用户界面,下图为WPF界面及其仿真结果与AmeSim中的仿真结果对比: 项目地址:WPF UI
B/S(WEB)系统中使用websocket插件调用扫描仪实现连续扫描并上传图像(IE文件扫描并自动上传)
浏览器下使用websocket插件调用客户端扫描仪扫描文件并山传,可以将纸质档案(如合同.文件.资料等)扫描并将扫描图像保存到服务器,可以用于合同管理.档案管理等. 通过插件方式调用扫描仪扫描并获取图 ...
基于QT的摄像头简单调用
基于QT的摄像头简单调用 1.打开QT创建工程. (1)选择Application,Qt Widgets Application.右下角choose. (2)Name改成Qcameratest.记住自 ...
HIK 海康 Android SDK 简单调用
海康官方demo及sdk开发指南下载地址参考知乎作者配置调用流程简单调用以及切换画面: 1.初始化sdk HCNetSDKJNAInstance.getInstance().NET_DVR_Ini ...
小白向零基础创建并简单调用钉钉自定义机器人
背景鉴于钉钉最近的火爆,遭受广大学生"迫害"的钉钉一首[ 钉钉本钉 ,在线求饶 ]在B站火了起来作为同是分期五星的用户,面对突如其来的求助被迫学习,简单调用钉钉自定 ...
SpringBoot 整合WebSocket 简单实战案例
前言这个简单实战案例主要目的是让大家了解websocket的一些简单使用. 另外使用stomp方式的: <Springboot 整合 WebSocket ,使用STOMP协议 ,前后端整合实战 ...
天地图，js 4.0 api，简单调用，高手请绕行
本文介绍使用天地图 js4.0 api,实现地图显示后台gps分布情况: 主要借用H5 GPS获取,利用天地图的背景展示: 效果图如下: 第一步,通过采集网页,手机gps数据,录入后台数据库:界面如下 ...

WebSocket简单调用

WebSocket简单调用相关推荐

最新文章

热门文章