webSocket前端代码

<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>websocket</title>
</head> <body> <script>
let websocket = null; if (typeof WebSocket != 'undefined') {
websocket = new WebSocket('ws://localhost:9701/webSocket');
console.log("您的浏览器支持Websocket通信协议");
}else{
alert("您的浏览器不支持Websocket通信协议,请使用Chrome或者Firefox浏览器!")
}
websocket.onopen = function (event) {
console.log('建立链接');
} websocket.onclose = function (event) {
console.log('链接关闭');
} websocket.onmessage = function (event) {
console.log('收到消息:' + event.data);
// 弹窗 播放音乐
} websocket.onerror = function () {
console.log('websocket通信发生错误。');
} websocket.onbeforeunload = function () {
websocket.close();
}
</script>
</body> </html>

后端代码

package com.pls.bid.preparation.utils;

import lombok.extern.slf4j.Slf4j;
import org.springframework.stereotype.Component; import javax.websocket.OnClose;
import javax.websocket.OnMessage;
import javax.websocket.OnOpen;
import javax.websocket.Session;
import javax.websocket.server.ServerEndpoint;
import java.io.IOException;
import java.util.concurrent.CopyOnWriteArraySet; /**
* @Description WebSocket 通信工具类
* @Author wwwang <1825153451@qq.com>
* @Version V1.0.0
* @Since 1.0
* @Date 2021/9/1
* 你我山巅自相逢
*/
@Component
@ServerEndpoint("/webSocket")
@Slf4j
public class WebSocket { private Session session; private static CopyOnWriteArraySet<WebSocket> webSocketSet = new CopyOnWriteArraySet<>(); /**
* 检测链接
* @param session
*/
@OnOpen
public void onOpen(Session session){
this.session = session;
webSocketSet.add(this);
log.info("[ WebSocket消息 ] 有新的链接,总数:{}",webSocketSet.size());
} /**
* 检测链接断开
*/
@OnClose
public void onClose(){
webSocketSet.remove(this);
log.info("[ WebSocket消息 ] 链接断开,总数:{}",webSocketSet.size());
} /**
* 接收消息
* @param message
*/
@OnMessage
public void onMessage(String message){
log.info("[ WebSocket消息 ] 收到来自客户端发来的消息:{}",message);
} /**
* 给指定客户端发送消息
* @param message
*/
public void sendMessage(String message,WebSocket webSocket){
log.info("[ WebSocket消息 ] 广播消息,message={}",message);
try {
webSocket.session.getBasicRemote().sendText(message);
} catch (IOException e) {
e.printStackTrace();
}
} /**
* 广播消息
* @param message
*/
public void sendMessage(String message){
for (WebSocket webSocket : webSocketSet) {
log.info("[ WebSocket消息 ] 广播消息,message={}",message);
try {
System.out.println(webSocket.session.toString());
webSocket.session.getBasicRemote().sendText(message);
} catch (IOException e) {
e.printStackTrace();
}
}
} }

webSocketConfig配置类

package com.pls.bid.preparation.config;

import org.springframework.context.annotation.Bean;
import org.springframework.stereotype.Component;
import org.springframework.web.socket.server.standard.ServerEndpointExporter; /**
* @Description 描述
* @Author wwwang <1825153451@qq.com>
* @Version V1.0.0
* @Since 1.0
* @Date 2021/9/2
* 你我山巅自相逢
*/
@Component
public class WebSocketConfig { /**
* 使用spring boot时 使用的是spring-boot的内置容器
* 如果要使用webSocket,需要注入ServerEndpointExporter
* @return
*/
@Bean
public ServerEndpointExporter serverEndpointExporter(){
return new ServerEndpointExporter();
}
}

可能发生的错误

websocket.html:17 WebSocket connection to 'ws://localhost:9701/webSocket' failed: 

解决方法

//在安全框架中放行
"/webSocket/**"

// 添加上述配置类

记录一下第一次webSocket通信成功的更多相关文章

  1. js判断是否安装某个android app,没有安装下载该应用(websocket通信,监听窗口失去焦点事件)

    现在经常有写场景需要提示用户下载app, 但是如果用户已经安装,我们希望是直接打开app. 实际上,js是没有判断app是否已经安装的方法的,我们只能曲线救国. 首先,我们需要有call起app的sc ...

  2. Springboot集成WebSocket通信全部代码,即扣即用。

    websocket通信主要来自两个类以及一个测试的html页面. MyHandler 和 WebSocketH5Config,下面全部代码 MyHandler类全部代码: package com.un ...

  3. 【Java Web开发学习】Spring MVC整合WebSocket通信

    Spring MVC整合WebSocket通信 目录 ========================================================================= ...

  4. 京信通信成功打造自动化工厂(MES应用案例)

    企业介绍: 京信通信成立于1997年,是一家集研发.生产.销售及服务于一体的移动通信外围设备专业厂商,致力于为客户提供无线覆盖和传输的整体解决方案,于2003年在香港联交所主板上市(2342.HK), ...

  5. 把酒言欢话聊天,基于Vue3.0+Tornado6.1+Redis发布订阅(pubsub)模式打造异步非阻塞(aioredis)实时(websocket)通信聊天系统

    原文转载自「刘悦的技术博客」https://v3u.cn/a_id_202 "表达欲"是人类成长史上的强大"源动力",恩格斯早就直截了当地指出,处在蒙昧时代即低 ...

  6. ucenter 显示通信成功的条件

    应用的主 URL+/api/uc.php?code= 如果这个页面返回1,则通信成功,也就是说,uc.php是通信成功里重要的一环 事实上,我还没有通信成功,我只是写了一个1在欺骗服务端

  7. C#(SuperWebSocket)与websocket通信

    原文:C#(SuperWebSocket)与websocket通信 客户端代码 点击可以查看一些关于websocket的介绍 <!DOCTYPE html> <html> &l ...

  8. websocket通信1009错误,

    问题说明: springboot继承 WebSocketConfigurer实现websocket通信服务,服务器端报错,"The decoded text message was too ...

  9. Python3+WebSockets实现WebSocket通信

    一.说明 1.1 背景说明 前段时间同事说云平台通信使用了个websocket的东西,今天抽空来看一下具体是怎么个通信过程. 从形式上看,websocket是一个应用层协议,socket是数据链路层. ...

  10. webSocket通信

    针对webSocket通信总结: 1.webSocket通信原理图: 2.webSocket通信实例 参考地址1:https://www.cnblogs.com/cjm123/p/9674506.ht ...

随机推荐

  1. dotnet OpenXml SDK 形状填充渐变色的主题色

    在 Office 文档的一些有趣的设计,颜色和画刷是可以继承的,这个继承包括了属性的继承.在形状填充里面使用的渐变色是可以一部分属性放在主题里面,主要找到主题里面的画刷,替换掉形状自己定义的内容,才是 ...

  2. Sermant在异地多活场景下的实践

    本文分享自华为云社区<Sermant在异地多活场景下的实践>,作者:华为云开源. Sermant社区在1.3.0和1.4.0版本相继推出了消息队列禁止消费插件和数据库禁写插件,分别用于解决 ...

  3. 03.redis 事务

    课程学习地址: https://www.bilibili.com/video/BV1S54y1R7SB?p=23 中间手册地址: http://www.redis.cn/ Redis事务本质:一组命令 ...

  4. 一键自动化博客发布工具,用过的人都说好(infoq篇)

    infoq的博客发布界面也是非常简洁的.首页就只有基本的标题,内容和封面图片,所以infoq的实现也相对比较简单. 一起来看看吧. 前提条件 前提条件当然是先下载 blog-auto-publishi ...

  5. neo4j配置文件neo4j.conf详解

    一.dbms配置 dbms.default_database=neo4j 目录路径 dbms.directories.data=datadbms.directories.plugins=plugins ...

  6. C语言:实现数组的删除和增加

    /*      删除方法:     如:12  32  56  84  95     用覆盖的方法     若删除第三个,则第四个要覆盖第三个,第五个要覆盖第四个     覆盖完:12  32  84 ...

  7. JDK源码阅读-------自学笔记(七)(二维数组的浅析)

    实际开发中一般最多使用到二维数组,再高很少使用 二维数组很少用,实际开发中会使用容器代替使用 1.创建二维数组 1 // 二维数组初始化 2 int[][] secondDimensional = n ...

  8. dbeaver使用详解

    1.dbeaver使用本地驱动 解压 点击可执行文件 驱动管理 新建驱动 起名字 com.mysql.jdbc.Driver jdbc:mysql//{host}[:{port}]/[{databas ...

  9. 【c++】函数模板

    语法: template<class & T1,class &T2> auto Add(T1 t,T2 t2) ->decltype(t+t2);   函数定义: t ...

  10. C# XML转Json Json转XML XML 转对象 对象转XML

    对象转XML对象时,只能是一个JObject对象,不能是一个集合对象.如果对象是一个列表集合,需要定义一个根对象比如这样:var obj =new { Root = ListLogs[ListLogs ...