分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 网页技术

H5 webSocket使用

发布时间:2023-09-06 02:24责任编辑:胡小海关键词:暂无标签

前端代码:

<script> ???var websocket = null; ???if(‘WebSocket‘ in window) { ???????websocket = new WebSocket(‘ws://sell.natapp4.cc/sell/webSocket‘); ???}else { ???????alert(‘该浏览器不支持websocket!‘); ???} ???websocket.onopen = function (event) { ???????console.log(‘建立连接‘); ???} ???websocket.onclose = function (event) { ???????console.log(‘连接关闭‘); ???} ???websocket.onmessage = function (event) { ???????console.log(‘收到消息:‘ + event.data) ???????//弹窗提醒, 播放音乐 ???????$(‘#myModal‘).modal(‘show‘); ???????document.getElementById(‘notice‘).play(); ???} ???websocket.onerror = function () { ???????alert(‘websocket通信发生错误!‘); ???} ???window.onbeforeunload = function () { ???????websocket.close(); ???}</script>

 

后端代码:

1.引入pom文件

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

2.配置config

import org.springframework.context.annotation.Bean;import org.springframework.stereotype.Component;import org.springframework.web.socket.server.standard.ServerEndpointExporter;@Componentpublic class WebSocketConfig { ???@Bean ???public ServerEndpointExporter serverEndpointExporter() { ???????return new ServerEndpointExporter(); ???}}

3.配置controller

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.util.concurrent.CopyOnWriteArraySet;@Component@ServerEndpoint("/webSocket")@Slf4jpublic class WebSocket { ???private Session session; ???private static CopyOnWriteArraySet<WebSocket> webSocketSet = new CopyOnWriteArraySet<>(); ???@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()); ???} ???@OnMessage ???public void onMessage(String message) { ???????log.info("【websocket消息】收到客户端发来的消息:{}", message); ???} ???public void sendMessage(String message) { ???????for (WebSocket webSocket: webSocketSet) { ???????????log.info("【websocket消息】广播消息, message={}", message); ???????????try { ???????????????webSocket.session.getBasicRemote().sendText(message); ???????????} catch (Exception e) { ???????????????e.printStackTrace(); ???????????} ???????} ???}}

  

H5 webSocket使用

原文地址:https://www.cnblogs.com/412013cl/p/10042476.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved