包依赖:

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

配置类 WebSocketConfig.java

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.socket.WebSocketHandler;
import org.springframework.web.socket.server.standard.ServerEndpointExporter;
import org.springframework.web.socket.config.annotation.WebSocketHandlerRegistry; import javax.websocket.server.ServerEndpointConfig; @Configuration
public class WebSocketConfig extends ServerEndpointConfig.Configurator { public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {
registry.addHandler(myHandler(), "")
.setAllowedOrigins("*");
} public WebSocketHandler myHandler() {
return new AlarmWebSocket();
} @Bean
public ServerEndpointExporter serverEndpointExporter() {
ServerEndpointExporter serverEndpointExporter = new ServerEndpointExporter();
return serverEndpointExporter;
}
}

WebSocketTest.java

import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.stereotype.Component;
import org.springframework.web.socket.handler.TextWebSocketHandler; import javax.websocket.*;
import javax.websocket.server.ServerEndpoint;
import java.io.IOException;
import java.util.concurrent.CopyOnWriteArraySet; @ServerEndpoint(value = "/websocketOne",configurator = WebSocketConfig.class)
@Component
public class AlarmWebSocket extends TextWebSocketHandler {
public final static Logger logger = LoggerFactory.getLogger(AlarmWebSocket.class); private static int onlineCount = 0; //用来存放每个客户端对应的MyWebSocket对象。
private static CopyOnWriteArraySet<AlarmWebSocket> webSocketMap = new CopyOnWriteArraySet<AlarmWebSocket>();
private Session session; @OnOpen
public void onOpen(Session session) throws IOException {
this.session = session;
webSocketMap.add(this);
addOnlineCount(); this.sendMessage(""); // TODO: 建立连接推送到前端的数据
logger.info("create new webSocket connect!now WebSocket Client number is " + getOnlineCount());
} @OnClose
public void onClose(){ webSocketMap.remove(this);
subOnlineCount();
System.out.println("close one webSocket connect!now WebSocket Client is " + getOnlineCount()); } /**
* 收到客户端消息后调用的方法
* @param message 客户端发送过来的消息
* @param session 可选的参数
*/
@OnMessage
public void onMessage(String message, Session session) throws IOException {
System.out.println(7777); //发送的用户号就是session.hashcode(),可以再加个map继续映射
/* int pos=message.indexOf("#*#*");
String realmessage=message.substring(0,pos);
String realuser=message.substring(pos+4,message.length());*/
System.out.println("来自客户端的消息:" + message);
//
/* WebSocketTest item=webSocketMap.get(realuser);
item.sendMessage(realmessage);*/
sendMessage(message); } /**
* 群发自定义消息
*/
public static void sendInfo(String message) {
System.out.println(66666); //log.info(message); for (AlarmWebSocket item : webSocketMap) {
try {
item.sendMessage(message);
} catch (IOException e) {
//log.error("向客户端发送数据失败!", e);
//continue;
}
}
} /**
* 发生错误时调用
* @param session
* @param error
*/
@OnError
public void onError(Session session, Throwable error){
System.out.println("发生错误");
error.printStackTrace();
} /**
* 这个方法与上面几个方法不一样。没有用注解,是根据自己需要添加的方法。
* @param message
* @throws IOException
*/
//给客户端传递消息
public void sendMessage(String message) throws IOException{ this.session.getBasicRemote().sendText(message);
//this.session.getAsyncRemote().sendText(message);
} public static synchronized int getOnlineCount() {
return onlineCount;
} public static synchronized void addOnlineCount() {
AlarmWebSocket.onlineCount++;
} public static synchronized void subOnlineCount() {
AlarmWebSocket.onlineCount--;
} }

html

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>RevealWebSocket</title>

    <script src="js/vue.js"></script>

</head>

<body>

接受数据<br/><br/>

    <div id="ws">

    <input id="text" type="text"/>

    <button onclick="sendMsg()">Send</button>

    <button onclick="closeWS()" :disabled="!opened">Close</button>

    <button onclick="openWS()"  :disabled="opened">Open</button>

    <div v-html="msg"></div>

    </div>

</body>

<script type="text/javascript">

    var websocket = null;

    var wsVue = new Vue({

        el: '#ws',

        data: {

            msg: "welcome to my websocket...<br/>",

            opened: false

        },

        mounted: function(){

            initWs();

        }

    });

    function initWs() {

        //check if your browser supports WebSocket

        if ('WebSocket' in window) {

            //websocket = new WebSocket("ws://124.207.211.211:85/monitor/monitor/socket");
websocket = new WebSocket("ws://localhost:9001/websocketOne");
//websocket = new WebSocket("ws://192.168.1.53:9100/monitor/websocketOne");
} else { alert('Sorry, websocket not supported by your browser.') } //Error callback websocket.onerror = function () { setMessageContent("error!"); wsVue.opened = false; }; //socket opened callback websocket.onopen = function (event) { setMessageContent("websocket opened"); wsVue.opened = true; } //message received callback websocket.onmessage = function (event) { setMessageContent(event.data); } //socket closed callback websocket.onclose = function () { setMessageContent("websocket closed"); wsVue.opened = false; } //when browser window closed, close the socket, to prevent server exception window.onbeforeunload = function () { websocket.close(); } } //update message to vue and then in div function setMessageContent(content) { wsVue.msg = content; } //click to close the websocket function closeWS() { websocket.close(); wsVue.opened = false; } //click to open the websocket function openWS() { initWs(); } //click to send message function sendMsg() { var message = document.getElementById('text').value; websocket.send(message); } </script> </body> </html>

sprint boot websocket 服务端+html5 示例测试的更多相关文章

  1. C# WebSocket 服务端示例代码 + HTML5客户端示例代码

    WebSocket服务端 C#示例代码 using System; using System.Collections.Generic; using System.Linq; using System. ...

  2. 用nodejs快速实现websocket服务端(带SSL证书生成)

    有不少公司将nodejs的socket.io作为websocket的解决方案,很遗憾的是socket.io是对websocket的封装,并不支持html5原始的websocket协议,微信小程序使用的 ...

  3. asp.net网站作为websocket服务端的应用该如何写

    最近被websocket的一个问题困扰了很久,有一个需求是在web网站中搭建websocket服务.客户端通过网页与服务器建立连接,然后服务器根据ip给客户端网页发送信息. 其实,这个需求并不难,只是 ...

  4. Netty 搭建 WebSocket 服务端

    一.编码器.解码器 ... ... @Autowired private HttpRequestHandler httpRequestHandler; @Autowired private TextW ...

  5. nodejs搭建简单的websocket服务端

    创建websocket服务端使用了nodejs-websocket ,首先要安装nodejs-websocket,在项目的目录下: npm install nodejs-websocket 1.搭建w ...

  6. WebSocket服务端

    http://blog.csdn.net/qq_20282263/article/details/54310737 C# 实现WebSocket服务端 原创 2017年01月10日 09:22:50 ...

  7. socket服务端开发之测试使用threading和gevent框架

    socket服务端开发之测试使用threading和gevent框架 话题是测试下多线程和gevent在socket服务端的小包表现能力,测试的方法不太严谨,也没有用event loop + pool ...

  8. Netty搭建WebSocket服务端

    Netty服务端 1.引入依赖 <?xml version="1.0" encoding="UTF-8"?> <project xmlns=& ...

  9. websocket服务端开发

    基于http请求以拉的方式去做服务器的推送,无论是实时性和有效字节都是差强人意的效果. 公司的im系统在与客户端的交互上实际上借助了websocket来实现服务器与客户端的事实消息推送,今天就来简单了 ...

随机推荐

  1. CopyOnWrite 思想及在 Java 并发包中的具体体现

    读多写少的场景下引发的问题? 假设现在我们的内存里有一个 ArrayList,这个 ArrayList 默认情况下肯定是线程不安全的,要是多个线程并发读和写这个 ArrayList 可能会有问题. 那 ...

  2. 使用hwclock读取rtc中的时间时报错"hwclock: ioctl(RTC_RD_TIME) to /dev/rtc0 to read the time failed: No such device or address"如何处理?

    1. No such device or address 这一句表明当前的板子上没有这样的外设,检查设备树和硬件连接情况 2. 笔者是这样解决的 由于设备树中为rtc所指定的总线与硬件上的连接rtc的 ...

  3. linux安装Erlang

    Erlang一种通用的面向并发的编程语言. 1.安装Erlang编译依赖: yum -y install gcc glibc-devel make ncurses-devel openssl-deve ...

  4. MySQL创建双主键

    如下: CREATE TABLE `loginlog` ( `id` ) unsigned zerofill NOT NULL AUTO_INCREMENT COMMENT '主键编号', `IP` ...

  5. Apache Flink 开发环境搭建和应用的配置、部署及运行

    https://mp.weixin.qq.com/s/noD2Jv6m-somEMtjWTJh3w 本文是根据 Apache Flink 系列直播课程整理而成,由阿里巴巴高级开发工程师沙晟阳分享,主要 ...

  6. 【JQuery插件】元素根据滚动条位置自定义吸顶效果

    ;(function($){ $.fn.extend({ /* 元素根据滚动条位置自定义吸顶插件 @defaultTop 初始化top位置 @startTop 开始滚动和回复原样的位置 @demo v ...

  7. 最近邻与K近邻算法思想

    在关于径向基神经网络的一篇博文机器学习之径向基神经网络(RBF NN)中已经对最近邻思想进行过描述,但是写到了RBF中有些重点不够突出,所以,这里重新对最近邻和K近邻的基本思想进行介绍,简洁扼要的加以 ...

  8. 开启Hadoop和Spark的学习之路

    Hadoop Hadoop是一个由Apache基金会所开发的分布式系统基础架构. 用户可以在不了解分布式底层细节的情况下,开发分布式程序.充分利用集群的威力进行高速运算和存储. Hadoop实现了一个 ...

  9. sublime text3 修改快捷键为eclipse

    Preferences -> Key bindings - User [ { "keys": ["shift+enter"], "command ...

  10. cmake vs qmake

    qmake 是为 Qt 量身打造的,使用起来非常方便 cmake 使用上不如qmake简单直接,但复杂换来的是强大的功能 内置的 out-of source 构建.(目前QtCreator为qmake ...