websocket简单demo

最新推荐文章于 2024-02-05 16:50:49 发布
最新推荐文章于 2024-02-05 16:50:49 发布
阅读量1k 收藏
点赞数
分类专栏： java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhejingyuan/article/details/84320291
版权

前端代码如下：

<!DOCTYPE html>
<html>
<head lang="en">
    <title>主页面</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta name="format-detection" content="telephone=no">
    <meta name="msapplication-tap-highlight" content="no">
    <meta name="viewport"  content="user-scalable=yes,initial-scale=1.0, maximum-scale=1, minimum-scale=1,width=device-width"/>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="jquery-2.1.1.min.js?version=new Date()"></script>
</head>
<body>
<div class="indexBox">
    <div class="yellow_prompt center none">
        您有 <span id="messages"></span> 条消息未读！
    </div>
</div>
<script type="text/javascript">
    sockOpen();
   function sockOpen() {
            var wsServer = 'ws://localhost:8081/schedule/ws'; //服务器地址
            var websocket = null;//创建WebSocket对象
            var data = {'userId': 131417};
            var socks = JSON.stringify(data);

            if ("WebSocket" in window) {
                websocket = new WebSocket(wsServer);
            } else {
                alert("此浏览器不支持WebSocket");
            }

            websocket.onopen = function (evt) {
                //已经建立连接
                websocket.send(socks);//向服务器发送消息
            };

            websocket.onclose = function (evt) {
                //已经关闭连接
            };
            websocket.onmessage = function (evt) {
                //收到服务器消息，使用evt.data提取
                var num = evt.data;
                if (num > 0) {
                    
                     $("#messages").text(num);
                     
                }
            };
            websocket.onerror = function (evt) {
                //产生异常
            };
    }
    
</script>
</body>
</html>

后台核心代码如下

package com.visionvera.bolecontrol.websocket;


import com.alibaba.fastjson.JSON;
import com.alibaba.fastjson.JSONObject;
import com.visionvera.boleservice.services.ScheduleService;
import com.visionvera.rubancore.request.BaseRequest;
import java.util.Map;
import javax.annotation.Resource;
import org.apache.commons.lang.StringUtils;
import org.slf4j.Logger;
import org.springframework.web.socket.CloseStatus;
import org.springframework.web.socket.TextMessage;
import org.springframework.web.socket.WebSocketSession;
import org.springframework.web.socket.handler.TextWebSocketHandler;

/**
 * 消息接收与推送
 * 当一个session会话过来时，会把WebSocketSession保存到SocketSessionQueue队列中，
 * 其他地方会用到该会话
 * @see com.visionvera.bolecontrol.controllers.ScheduleMsgController#sendMsg(BaseRequest)
 * Created by weicl on 2017/9/8.
 */
public class MessageHandler extends TextWebSocketHandler {

  private static final Logger logger = org.slf4j.LoggerFactory.getLogger(MessageHandler.class);

  @Resource
  private ScheduleService scheduleService;

  @Override
  protected void handleTextMessage(WebSocketSession session, TextMessage message) throws Exception {
    String msg = message.getPayload().trim();
    if(logger.isDebugEnabled()){
      logger.debug("前端传送的消息：{}",msg);
    }
    JSONObject jsonObject = JSON.parseObject(msg);
    String userId = jsonObject.getString("userId");
    if(StringUtils.isNotBlank(userId)){
     SocketSessionQueue.put(userId,session);
    }
    Map<String, Object> schedueNumMap = scheduleService.getSchedueNum();
    if(schedueNumMap != null && schedueNumMap.size() > 0){
      Object numVal = schedueNumMap.get(userId);
      if(numVal != null){
        session.sendMessage(new TextMessage(String.valueOf(numVal)));
      }
    }
  }

  @Override
  public void afterConnectionEstablished(WebSocketSession session) throws Exception {
    if(logger.isDebugEnabled()){
      logger.debug("建立连接........");
    }
  }

  @Override
  public void afterConnectionClosed(WebSocketSession session, CloseStatus status) throws Exception {
    if(logger.isDebugEnabled()){
      logger.debug("关闭连接........");
    }
  }

}

 

package com.visionvera.bolecontrol.websocket;

import java.util.Map;
import java.util.Set;
import java.util.concurrent.ConcurrentHashMap;
import org.springframework.web.socket.WebSocketSession;

/**
 * 消息集合
 * Created by weicl on 2017/10/10.
 */
public class SocketSessionQueue {

  private static final Map<String,WebSocketSession> map = new ConcurrentHashMap();

  public static void put(String key,WebSocketSession webSocketSession){
    map.put(key,webSocketSession);
  }

  public static WebSocketSession get(String key){
    return map.get(key);
  }

  public static void remove(String key){
    map.remove(key);
  }

  public static Set<String> keySet(){
    return map.keySet();
  }
}

 

package com.visionvera.bolecontrol.websocket;

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter;
import org.springframework.web.socket.config.annotation.EnableWebSocket;
import org.springframework.web.socket.config.annotation.WebSocketConfigurer;
import org.springframework.web.socket.config.annotation.WebSocketHandlerRegistry;

/**
 * 启用WebSocket并映射消息处理器
 * Created by weicl on 2017/9/8.
 */

@Configuration
@EnableWebSocket
public class WebSocketConfig extends WebMvcConfigurerAdapter implements WebSocketConfigurer {

  @Override
  public void registerWebSocketHandlers(WebSocketHandlerRegistry webSocketHandlerRegistry) {

    //注册websocket实现类，指定参数访问地址;allowedOrigins=* 允许跨域
    webSocketHandlerRegistry.addHandler(getProgressHandler(),"/schedule/ws").addInterceptors(getHandShakeIntegercpetor()).setAllowedOrigins("*");
    //允许客户端使用sockjs
    webSocketHandlerRegistry.addHandler(getProgressHandler(),"/schedule/sockjs/ws").addInterceptors(getHandShakeIntegercpetor()).setAllowedOrigins("*")
        .withSockJS();
  }

  @Bean
  public MessageHandler getProgressHandler(){
    return new MessageHandler();
  }

  @Bean
  public WebSocketHandShakeIntegercpetor getHandShakeIntegercpetor(){
    return new WebSocketHandShakeIntegercpetor();
  }
}

 

package com.visionvera.bolecontrol.websocket;

import java.util.Enumeration;
import java.util.Map;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpSession;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.http.server.ServerHttpRequest;
import org.springframework.http.server.ServerHttpResponse;
import org.springframework.http.server.ServletServerHttpRequest;
import org.springframework.web.socket.WebSocketHandler;
import org.springframework.web.socket.server.HandshakeInterceptor;

/**
 * 创建websocket握手协议
 * Created by weicl on 2017/9/6.
 */
public class WebSocketHandShakeIntegercpetor implements HandshakeInterceptor{

  private static final Logger logger = LoggerFactory.getLogger(WebSocketHandShakeIntegercpetor.class);

  @Override
  public boolean beforeHandshake(ServerHttpRequest serverHttpRequest,
      ServerHttpResponse serverHttpResponse, WebSocketHandler webSocketHandler,
      Map<String, Object> map) throws Exception {
    logger.debug("start handshake........");
    HttpSession session = getSession(serverHttpRequest);
    if(session != null){
      Enumeration<String> names = session.getAttributeNames();
      while(names.hasMoreElements()){
        String name = names.nextElement();
        Object value = session.getAttribute(name);
        logger.debug("name:{},value:{}",name,value);
        map.put(name,value);
      }
      map.put("session",session);
      return true;
    }
    return false;
  }

  @Override
  public void afterHandshake(ServerHttpRequest serverHttpRequest,
      ServerHttpResponse serverHttpResponse, WebSocketHandler webSocketHandler, Exception e) {
    logger.debug("afterHandshake........");
  }

  /**
   *
   * @param request
   * @return HttpSession
   */
  private HttpSession getSession(ServerHttpRequest request){
    if(request instanceof ServletServerHttpRequest){
      ServletServerHttpRequest servletRequest = (ServletServerHttpRequest) request;
      HttpServletRequest httpServletRequest = servletRequest.getServletRequest();
      return httpServletRequest.getSession();
    }
    return null;
  }
}
I-miss-you
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
websocket demo(页面html客户端)
12-28
此websocket demo是客户端是html写的。这是一个比较完善的项目demo，可以通过此demo学习怎么编写websocket项目
WebSocket的Demo
weixin_43117893的博客
09-01 2292
使用postman测试websocket
socket编程demo（udp）
最新发布
yisi15的博客
02-05 469
client端：while(1){else{sock = -1;udp_exit:sock = -1;int buffer;return;while(1){else{sock = -1;sock = -1;
【2023-4-24】前端使用websocket的简单示例
lookingForw_4585的博客
04-24 330
简单记录下，使用websocket的小示例，不代表实际项目中使用的情况，属于理解下机制的示例实操。
WebSocket 前端demo node.js 加vue
qq_44428688的博客
04-03 246
websoket使得客户端和服务端的数据交换变的更加的简单。允许服务端主动向客户端推送数据，在websoket api中，浏览器和服务器值需要做一个握手的动作，然后浏览器和服务器之间就形成了一条快速通道。浏览器通过该Js向服务器发出建立websocket连接的请求，连接建立以后，客户端和服务端就可以挺高tcp连接直接交换数据，当你获取webscoket连接以后，可以通过send方法向服务器发生数据。websoket能更好的节省服务器资源和宽带，并且能够更实时地进行通讯。node.js搭建简单的服务端。
websocket 前+后端协调demo
weixin_45812090的博客
05-24 1970
websocket 前+后端协调
WebSocket聊天功能小Demo
爱琴孩的博客
05-11 897
WebSocket协议是基于TCP的一种网络协议，它实现了浏览器与服务器全双工（Full-duplex）通信。它允许服务端主动向客户端推送数据，这使得客户端和服务器之间的数据交换变得更加简单高效。在WebSocket API中，浏览器和服务器只需要完成一次握手，两者之间就可以创建持久性的连接，并进行双向数据传输。
js实现webSocket服务器端demo
sinat_36319434的博客
11-22 3000
服务器端的实现：先装一个nodeJs的模块，叫nodejs-websocket ，使用npm安装，命令行输入npm install nodejs-websocket，demo代码： const ws = require("nodejs-websocket"); //引入依赖包 const POST = 8888; //定义端口 // 创建一个server const server = ws.createServer((connect) => { //每次只要有新的用户加入，就会...
websocket-Demo
liuhao9999的博客
03-03 584
server.js var ws = require('nodejs-websocket'); var count = 1; var server = ws.createServer(function(socket) {　 socket.on('text', function(str) {　　　 var data = JSON.parse(str); if (data) { server.connections.forEach(functi
前端连接websocket demo
qq_25073261的博客
01-20 1394
前端连接websocket demo 代码如下 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Java后端WebSocket的Tomcat实现</title...
Android 端 WebSocket 简单 Demo
03-21
【Android WebSocket】Android 端 WebSocket 基本用法 ( 添加依赖和权限 | 创建 WebSocketClient 客户端类 | 建立连接并发送消息 ) https://hanshuliang.blog.csdn.net/article/details/123628775 博客配套源码
java websocket简单DEMO
08-08
java websocket简单DEMO 注解齐全
java实现websocket简单demo
06-30
一个简单的java实现websocket的小demo,,查考博客http://blog.csdn.net/sunnylinner/article/details/52562583?locationNum=4&fps=1
websocket-demo.zip
06-14
最最简单的WebSocket demo 之前百度搜索都是springboot或者cloud 要么是js搭建的 索性自己写个springMVC整合的，省的以后从零接起来麻烦
websocket-demo
06-05
一个websocket的简单demo
c:forEach>用法
热门推荐
zhejingyuan的专栏
12-20 17万+
c:forEach>用法
Spring配置文件总结
zhejingyuan的专栏
11-12 10万+
Spring配置文件总结
hex加密解密算法
zhejingyuan的专栏
10-20 3万+
select * from sys_user where login_name in( select login_name from SYS_USER t group by login_name  HAVING count(login_name)>1); /**  * 生成安全的密码，生成随机的16位salt并经过1024次 sha-1 hash  */ public static
JQ 选择器大全
zhejingyuan的专栏
04-18 3万+
JQ 选择器大全
c++ websocket客户端 demo
06-25
### 回答1： WebSocket 是一种在单个 TCP 连接上进行全双工通信的通信协议。它是为了解决 Web 应用程序中实时通信的需求而设计的。WebSocket 使得客户端和服务器之间的实时数据交换变得更加容易和快捷。 下面是一个简单的 WebSocket 客户端 demo： ```javascript // 创建 WebSocket 连接 const socket = new WebSocket('ws://localhost:8000'); // 连接成功时触发 socket.addEventListener('open', event => { console.log('WebSocket 连接已建立'); // 发送消息 socket.send('Hello, WebSocket!'); }); // 接收到消息时触发 socket.addEventListener('message', event => { console.log('收到消息：', event.data); }); // 连接关闭时触发 socket.addEventListener('close', event => { console.log('WebSocket 连接已关闭'); }); // 连接出错时触发 socket.addEventListener('error', event => { console.error('WebSocket 连接出错：', event); }); ``` 首先，在客户端使用 WebSocket 构造函数创建连接，指定要连接的服务器地址和端口。 然后，在连接成功时，通过 addEventListener 监听 open 事件，触发回调函数，表示连接建立成功。 接着，在收到消息时，监听 message 事件，触发回调函数，处理接收到的消息数据。 当连接关闭或出错时，分别监听 close 和 error 事件，触发回调函数，处理连接关闭或出错的情况。 最后，通过 send 方法发送消息到服务器。 以上就是一个简单的 WebSocket 客户端 demo。可以尝试在浏览器控制台中运行这段代码，开启一个 WebSocket 连接，向服务器发送消息并接收服务器返回的消息。 ### 回答2： WebSocket是一种支持双向通信的网络协议，在应用程序中被广泛使用。本文将介绍WebSocket客户端的编写，使用JavaScript编写一个简单的WebSocket客户端示例。 WebSocket客户端程序的主要步骤如下： 1. 创建一个WebSocket对象，并指定连接的URL地址； 2. 添加WebSocket事件处理程序，包括onopen、onmessage、onerror和onclose事件； 3. 使用WebSocket对象的send方法来发送数据； 4. 使用WebSocket对象的close方法结束连接。 下面是一个简单的WebSocket客户端示例： ```javascript var ws = new WebSocket('ws://localhost:8080'); ws.onopen = function() { console.log('WebSocket连接已打开！'); }; ws.onmessage = function(event) { console.log('收到消息: ' + event.data); }; ws.onerror = function(event) { console.log('WebSocket发生错误！'); }; ws.onclose = function(event) { console.log('WebSocket连接已关闭！'); }; ws.send('Hello, WebSocket!'); ws.close(); ``` 在本示例中，我们创建一个WebSocket对象连接到本地主机的8080端口，然后添加了四个事件处理程序，分别处理连接打开、接收消息、发生错误和连接关闭事件。在连接打开后，我们使用WebSocket对象的send方法发送了一个简单的消息，最后使用close方法关闭了连接。 总之，WebSocket客户端是非常简单的。我们只需要创建WebSocket对象并设置事件处理程序即可。从这个简单的示例中，我们可以很容易地理解WebSocket客户端的工作原理。 ### 回答3： WebSocket是一种新的协议，它可以在客户端和服务器之间建立实时通信连接。相比传统的HTTP协议，WebSocket协议具有更快的速度和更低的延迟。在WebSocket客户端Demo中，我们可以了解如何使用JavaScript编写WebSocket客户端代码，并与WebSocket服务器进行通信。 首先，我们需要在HTML文件中引入WebSocket库。可以使用标准的HTML <script>标签引入该库。然后，我们需要创建一个WebSocket对象。可以使用浏览器原生的WebSocket对象，使用WebSocket API的构造函数创建WebSocket对象。 当WebSocket对象创建完成后，我们需要建立WebSocket连接。可以使用WebSocket对象的open事件来建立连接。一旦建立了WebSocket连接，客户端就可以向服务器发送消息，并接收来自服务器的反馈。 在WebSocket连接建立之后，我们可以使用WebSocket对象的send方法向服务器发送消息。服务器接收到消息后，可以使用WebSocket对象的send方法将消息返回给客户端。 在WebSocket客户端Demo中，我们可以学习到WebSocket客户端的基本使用方法，包括创建WebSocket对象、建立连接、发送和接收消息。WebSocket客户端的使用可以大大提高网站的实时交互体验，使用户能够更好地与网站进行交互。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值