websocket简单小例子

最新推荐文章于 2024-01-14 11:00:00 发布

蒙圈的猿

最新推荐文章于 2024-01-14 11:00:00 发布

阅读量399

点赞数 1

分类专栏： java 文章标签： websocket java 网络协议

本文链接：https://blog.csdn.net/qq_37421416/article/details/121894135

版权

java 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

一.前提准备

html页面，idea编辑器

二.引用依赖

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

三.添加配置,开启websocket支持

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.socket.server.standard.ServerEndpointExporter;

@Configuration
public class WebSocketConfig {
    @Bean
    public ServerEndpointExporter serverEndpointExporter(){
        return new ServerEndpointExporter();
    }
}

四.服务

import org.springframework.stereotype.Component;

import javax.websocket.*;
import javax.websocket.server.PathParam;
import javax.websocket.server.ServerEndpoint;
import java.io.IOException;
import java.util.concurrent.CopyOnWriteArraySet;

@ServerEndpoint("/websocket/{sid}")
@Component
public class WebSocketServer {
    private static int onlineCount = 0;
    //concurrent包的线程安全Set，用来存放每个客户端对应的MyWebSocket对象。
    private static CopyOnWriteArraySet<WebSocketServer> webSocketSet = new CopyOnWriteArraySet<WebSocketServer>();
    //与某个客户端的连接会话，需要通过它来给客户端发送数据
    private Session session;

    //接收sid(一般是用户账号id）
    private String sid="";



// * 连接建立成功调用的方法*//*
  @OnOpen
  public void onOpen(Session session, @PathParam("sid") String sid) {
    this.session = session;
    webSocketSet.add(this);   //加入set中
    addOnlineCount();      //在线数加1
    System.out.println("有新窗口开始监听:"+sid+",当前在线人数为" + getOnlineCount() +"账号："+webSocketSet.toString());

    this.sid=sid;
    try {
      sendMessage("连接成功");
    } catch (IOException e) {
      System.out.println("websocket IO异常");
    }
  }


 //连接关闭调用的方法
  @OnClose
  public void onClose() {
    webSocketSet.remove(this); //从set中删除
    subOnlineCount();      //在线数减1
    System.out.println("有一连接关闭！当前在线人数为" + getOnlineCount());
  }

/**
 * 收到客户端消息后调用的方法
 *
 * @param message 客户端发送过来的消息*/
  @OnMessage
  public void onMessage(String message, Session session) {
    System.out.println("收到来自窗口"+sid+"的信息:"+message);
    //群发消息
    for (WebSocketServer item : webSocketSet) {
      try {
        item.sendMessage(message);
      } catch (IOException e) {
        e.printStackTrace();
      }
    }
  }

/**
 *
 * @param session
 * @param error
 */
  @OnError
  public void onError(Session session, Throwable error) {
    System.out.println("发生错误");
    error.printStackTrace();
  }

/**
 * 实现服务器主动推送
 */
  public void sendMessage(String message) throws IOException {
    this.session.getBasicRemote().sendText(message);
  }

/**
 * 群发自定义消息
 * */
  public static void sendInfo(String message,@PathParam("sid") String sid) throws IOException {
    System.out.println("推送消息到窗口"+sid+"，推送内容:"+message);
    for (WebSocketServer item : webSocketSet) {
      try {
        //这里可以设定只推送给这个sid的，为null则全部推送
        if(sid==null) {
          item.sendMessage(message);
        }else if(item.sid.equals(sid)){
          item.sendMessage(message);
        }
      } catch (IOException e) {
        continue;
      }
    }
  }
  public static synchronized int getOnlineCount() {
    return onlineCount;
  }
  public static synchronized void addOnlineCount() {
    WebSocketServer.onlineCount++;
  }
  public static synchronized void subOnlineCount() {
    WebSocketServer.onlineCount--;
  }
  public static CopyOnWriteArraySet<WebSocketServer> getWebSocketSet() {
    return webSocketSet;
  }

五.控制器入口，实现推送数据到客户端

import com.example.socket.service.WebSocketServer;
import org.springframework.web.bind.annotation.*;
import java.io.IOException;
import java.util.HashMap;
import java.util.Map;

@RestController
public class WebSocket {
    //推送数据接口
    @ResponseBody
    @RequestMapping("/socket/push/{cid}")
    public Map pushToWeb(@PathVariable String cid, String message) {
        Map result = new HashMap();
        try {
            WebSocketServer.sendInfo(message,cid);
            result.put("code", 200);
            result.put("msg", "success");
        } catch (IOException e) {
            e.printStackTrace();
        }
        return result;
    }
}

六.html页面实现

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8"></meta>
    <title>Title</title>
</head>

<body>
    hello world!

</body>
<script>
    var socket;
    if (typeof(WebSocket) == "undefined") {
        console.log("您的浏览器不支持WebSocket");
    } else {
        console.log("您的浏览器支持WebSocket");
        //实现化WebSocket对象，指定要连接的服务器地址与端口 建立连接
        //等同于
        index = new WebSocket("ws://localhost:8080/websocket/2");
        //socket = new WebSocket("${basePath}websocket/${cid}".replace("http","ws"));
        //打开事件
        index.onopen = function() {
            console.log("Socket 已打开");
            //socket.send("这是来自客户端的消息" + location.href + new Date());
        };
        //获得消息事件
        index.onmessage = function(msg) {

            console.log(msg.data);
            //发现消息进入  开始处理前端触发逻辑
        };
        //关闭事件
        index.onclose = function() {
            console.log("Socket已关闭");
        };
        //发生了错误事件
        index.onerror = function() {
                alert("Socket发生了错误");
                //此时可以尝试刷新页面
            }
            //页面刷新关闭，socket关闭
        window.onbeforeunload = function() {
                index.console();
            }
            //离开页面时，关闭socket
            //jquery1.8中已经被废弃，3.0中已经移除
            // $(window).unload(function(){
            //   socket.close();
            //});
    }
</script>

</html>

demo链接：https://pan.baidu.com/s/11PBP6CJXhdlPIgBhdRpbSA
提取码：1234