websocket前台实现代码,保存为html执行就好

html代码来自:https://blog.csdn.net/M348915654/article/details/53616837

<html>
<head>
<meta charset="utf-8">
<title>WebSoket Demo</title>
<script type="text/JavaScript">
// tips: WebSocket 调试脚本
var WebSocket = WebSocket || window.WebSocket || window.MozWebSocket;
// 验证浏览器是否支持WebSocket协议
if (!WebSocket) {
alert("WebSocket not supported by this browser!");
}
else {
var g_ws = null; function Display() {
// 载入上次记录的数据 //...
console.log("websocket 测试");
} var log = function (s) {
if (document.readyState !== "complete") {
log.buffer.push(s);
} else {
document.getElementById("contentId").value = (s + "\n") + document.getElementById("contentId").value
}
} function CreateConnect () {
var msg = document.getElementById("wsUrlId");
console.log("CreateConnect(), url: " + msg.value);
if (g_ws == null) {
var wsUrlValue = msg.value; try {
g_ws = new WebSocket(wsUrlValue);
// 监听消息
g_ws.onmessage = function (event) {
//valueLabel.innerHTML+ = event.data;
log("onmessage(), 接收到服务器消息: " + event.data);
};
// 打开 WebSocket
g_ws.onclose = function (event) {
//WebSocket Status:: Socket Closed
log("onclose(), Socket 已关闭!");
g_ws = null;
};
// 打开WebSocket
g_ws.onopen = function (event) {
//WebSocket Status:: Socket Open
// 发送一个初始化消息
// g_ws.send("Hello, Server!");
log("onopen(), Socket 连接成功!");
};
g_ws.onerror = function (event) {
//WebSocket Status:: Error was reported
log("onerror(), Socket 发生错误!");
};
}
catch (e) {
g_ws = null;
log("连接异常, 重置 websocket");
}
}
} function SendMsg() {
var msg = document.getElementById("messageId");
console.log("SendMsg(), msg: " + msg.value);
if (g_ws != null) {
//alert(msg.value);
log("发送 Socket 消息: " + msg.value);
g_ws.send(msg.value);
}
else {
log("Socket 还未创建!, msg: " + msg.value);
}
} function CloseConnect () {
console.log("CloseConnect()");
if (g_ws != null) {
g_ws.close();
}
}
}
</script>
</head> <body onload="Display()">
<div id="valueLabel"></div>
<textarea rows="20" cols="30" id="contentId"></textarea>
<br/>
<input name="wsUrl" id="wsUrlId" value="ws://localhost:8888/websocket"/>
<button id="createButton" onClick="javascript:CreateConnect()">Create</button>
<button id="closeButton" onClick="javascript:CloseConnect()">Close</button>
<br/>
<input name="message" id="messageId" value="Hello, Server!"/>
<button id="sendButton" onClick="javascript:SendMsg()">Send</button>
</body>
</html>

方法一

配置:

/**
* webSocket 方法一
*/
@Configuration
@ConditionalOnWebApplication
public class WebSocketConfig {
@Bean
public ServerEndpointExporter serverEndpointExporter() {
return new ServerEndpointExporter();
}
}

实现:

/**
* webSocket 方法一
*/
@Slf4j
@ServerEndpoint(value = "/websocket")
@Component
public class WebSocketServer {
/**
* 连接建立成功调用的方法
*/
@OnOpen
public void onOpen(Session session) { } /**
* 连接关闭调用的方法
*/
@OnClose
public void onClose() {
webSocketSet.remove(this); //从set中删除 } /**
* 收到客户端消息后调用的方法
*
* @param message 客户端发送过来的消息
*/
@OnMessage
public void onMessage(String message, Session session) { } /**
* @param session
* @param error
*/
@OnError
public void onError(Session session, Throwable error) { }
}

方法二:

配置

/**
* webSocket方法二
* @author tongxiabin
*/
@Component
@EnableWebMvc
@EnableWebSocket
public class WebSocketConfig2 implements WebSocketConfigurer { @Resource
private MyWebSocketHandler handler; @Override
public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {
registry.addHandler(handler, "/wsMy").addInterceptors(new HandshakeInterceptor() {
@Override
public boolean beforeHandshake(ServerHttpRequest request, ServerHttpResponse serverHttpResponse, WebSocketHandler webSocketHandler, Map<String, Object> map) throws Exception {
System.out.println("registerWebSocketHandlers-beforeHandshake");
serverHttpResponse.setStatusCode(HttpStatus.OK);
return true;
} @Override
public void afterHandshake(ServerHttpRequest serverHttpRequest, ServerHttpResponse serverHttpResponse, WebSocketHandler webSocketHandler, Exception e) {
System.out.println("registerWebSocketHandlers-afterHandshake");
}
}).setAllowedOrigins("*");
}
}

实现:

/**
* webSocket 方法二
*/
@Component
public class MyWebSocketHandler implements WebSocketHandler { private static final Map<String ,WebSocketSession> userMap=new HashMap<>();
@Override
public void afterConnectionEstablished(WebSocketSession webSocketSession) throws Exception {
String jspCode = (String )webSocketSession.getAttributes().get("jspCode"); if(userMap.get(jspCode)==null){
System.out.println(jspCode);
userMap.put(jspCode,webSocketSession);
}
} @Override
public void handleMessage(WebSocketSession webSocketSession, WebSocketMessage<?> webSocketMessage) throws Exception {
System.out.println("handleMessage");
} @Override
public void handleTransportError(WebSocketSession webSocketSession, Throwable throwable) throws Exception {
System.out.println("handleTransportError");
} @Override
public void afterConnectionClosed(WebSocketSession webSocketSession, CloseStatus closeStatus) throws Exception {
System.out.println("afterConnectionClosed");
} @Override
public boolean supportsPartialMessages() {
return false;
}
}

spring boot 下websocket实现的两种方法的更多相关文章

  1. spring boot 用@CONFIGURATIONPROPERTIES 和 @Configuration两种方法读取配置文件

    spring cloud  读取 配置文件属性值 1.bean @Data public class LocalFileConfig { /** * 文件存储地址 */ private String ...

  2. spring boot 解决 跨域 的两种方法 -- 前后端分离

    1.前言 以前做项目 ,基本上是使用 MVC 模式 ,使得视图与模型绑定 ,前后端地址与端口都一样 , 但是现在有些需求 ,需要暴露给外网访问 ,那么这就出现了个跨域问题 ,与同源原则冲突, 造成访问 ...

  3. Spring Boot定义系统启动任务的两种方式

    Spring Boot定义系统启动任务的两种方式 概述 如果涉及到系统任务,例如在项目启动阶段要做一些数据初始化操作,这些操作有一个共同的特点,只在项目启动时进行,以后都不再执行,这里,容易想到web ...

  4. Linux 下操作GPIO(两种方法,驱动和mmap)(转载)

    目前我所知道的在Linux下操作GPIO有两种方法: 1.编写驱动,这当然要熟悉Linux下驱动的编写方法和技巧,在驱动里可以使用ioremap函数获得GPIO物理基地址指针,然后使用这个指针根据io ...

  5. Linux 下操作gpio(两种方法,驱动和mmap)

    目前我所知道的在linux下操作GPIO有两种方法: 1.  编写驱动,这当然要熟悉linux下驱动的编写方法和技巧,在驱动里可以使用ioremap函数获得GPIO物理基地址指针,然后使用这个指针根据 ...

  6. 20155212 C语言实现linux下pwd命令的两种方法

    20155212 C语言实现linux下pwd命令的两种方法 学习pwd命令 通过man pwd命令查看 pwd [OPTION],一般不加参数 -P显示当前目录的物理路径 -L显示当前目录的连接路径 ...

  7. 创建一个 Spring Boot 项目,你会几种方法?

    我最早是 2016 年底开始写 Spring Boot 相关的博客,当时使用的版本还是 1.4.x ,文章发表在 CSDN 上,阅读量最大的一篇有 42W+,如下图: 2017 年由于种种原因,就没有 ...

  8. spring boot下WebSocket消息推送(转)

    原文地址:https://www.cnblogs.com/betterboyz/p/8669879.html WebSocket协议 WebSocket是一种在单个TCP连接上进行全双工通讯的协议.W ...

  9. spring boot下WebSocket消息推送

    WebSocket协议 WebSocket是一种在单个TCP连接上进行全双工通讯的协议.WebSocket通信协议于2011年被IETF定为标准RFC 6455,并由RFC7936补充规范.WebSo ...

随机推荐

  1. redis学习三 redis持久化

      1,快照持久化 1简介      redis可以通过创建快照来获得某个时间点上的内存内容的数据副本,有了副本之后,就可以将副本发送到其他redis服务器上从而创建相同数据的从服务器,同时快照留在原 ...

  2. App.CSharp.Grid的ICells接口

    using System;using System.Collections.Generic;using System.Text;using System.Drawing;using System.Wi ...

  3. 配置镜像yum源--解决RHN not available的问题

    由于RHN服务是收费的,在安装redhat系统时,自带的yum可能不能使用.中国有很多好用的镜像源,我们可以把yum源更改到国内镜像源上,步骤如下: 一.卸载本地yum #rpm –qa|grep y ...

  4. Docker的Gitlab镜像的使用

    Gitlab是一款非常强大的开源源码管理系统.它支持基于Git的源码管理.代码评审.issue跟踪.活动管理.wiki页面,持续集成和测试等功能.基于Gitlab,用户可以自己搭建一套类似Github ...

  5. centos7虚拟机桥接上网(DHCP)

    centos设置成自动获取ip地址方式(DHCP) 1.打开终端查看网卡信息 #ifconfigifcfg-enp0s3lovirbro 2.编辑文件#vim /etc/sysconfig/netwo ...

  6. c#日期与字符串间的转换(转)

    1.日期转字符串(转载) 在编程中经常要用到将日期变量转换为字符串的情况,而且不同的时候希望转换成不同格式的字符串 下面是一些常用的转换及转换结果: (查看格式说明) 以日期为例: 2009-09-0 ...

  7. .NET回归 HTML----表单元素(1)和一些常用的标记

    表单就是-----用于搜集不同类型的用户输入. 表单元素指的是不同类型的 input 元素.复选框.单选按钮.提交按钮等等. 首先将表单元素分为三个类型.文本类,按钮类,选择类. 表单可以嵌套在表中, ...

  8. resize函数有五种插值算法

    转自http://blog.csdn.net/fengbingchun/article/details/17335477 最新版OpenCV2.4.7中,cv::resize函数有五种插值算法:最近邻 ...

  9. Verilog 语言 001 --- 入门级 --- 编写一个半加器电路模块

    Verilog 语言编写一个 半加器 电路模块 半加器 的电路结构: S = A 异或 B C = A 与 B 1. 程序代码 module h_adder (A, B, SO, CO); input ...

  10. (转)Linux操作系统下VMware的多网卡桥接转换

    VMware,鼎鼎大名的虚拟机软件,没有人不知道吧?当然,在Linux下使用虚拟机软件,并不一定需要使用VMWare,Xen也是非常不错的选择,有很多评测就认为XEN的表现优于VMware.可惜的是X ...