websocket的demo

1.引入依赖

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

2.前端代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
  <h1>12</h1>
<script>
    var websocket = null;
    if ('WebSocket' in window){
        websocket = new WebSocket('ws://localhost:8080/webSocket');
    }else {
        alert("不支持websocket ")
    }
    websocket.onopen = function (event){
        console.log('建立连接')
    }
    websocket.onclose = function (event){
        console.log('连接关闭')
    }
    websocket.onmessage = function (event){
        console.log('收到消息'+event.data)
    }
    websocket.onerror = function (){
        alert('错误')
    }
    window.onbeforeunload = function (){
        websocket.close();
    }
</script>
</body>
</html>

3.后端代码

@Component
public class WebConfig {
    @Bean
    public ServerEndpointExporter serverEndpointExporter(){
        return new ServerEndpointExporter();
    }
}

@Component
@ServerEndpoint("/webSocket")
public class WebSocket {
    private Session session;
    private static CopyOnWriteArraySet<WebSocket> webSockets = new CopyOnWriteArraySet<>();
    @OnOpen
    public void onOpen(Session session){
        this.session = session;
        webSockets.add(this);
        System.out.println("webSocket消息,有新的连接 总数" + webSockets.size());
    }
    @OnClose
    public void onClose(){
        this.session = session;
        webSockets.remove(this);
        System.out.println("webSocket消息,连接断开 总数" + webSockets.size());
    }
    @OnMessage
    public void onMessage(String message){
            System.out.println("客户端消息" + message);
    }
    public void sendMessage(String message){
        for (WebSocket webSocket : webSockets) {
            System.out.println("广播消息" + message);
            try {
                webSocket.session.getBasicRemote().sendText(message);
            } catch (IOException e) {
                e.printStackTrace();
            }
        }
    }
}

  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
WebSocket 是一种在单个 TCP 连接上进行全双工通信的网络协议。它使得客户端和服务器之间的数据交换变得更加简单,实时和可靠。WebSocket 协议通常被用于实时数据推送和在线游戏等场景。 下面是一个简单的 WebSocket Demo 实现步骤: 1. 客户端建立 WebSocket 连接:客户端使用 WebSocket 对象创建与服务器的连接。 2. 服务器响应请求:服务器收到客户端的连接请求后,返回一个响应消息。 3. 客户端和服务器进行数据交换:客户端和服务器可以通过 send() 和 onmessage() 方法进行数据交换。 4. 关闭连接:当客户端或服务器需要关闭连接时,可以调用 close() 方法。 下面是一个简单的 WebSocket Demo 代码示例: 客户端代码: ```javascript var ws = new WebSocket("ws://localhost:8080"); ws.onopen = function() { console.log("WebSocket 已连接"); ws.send("客户端发送消息"); }; ws.onmessage = function(evt) { console.log("客户端收到消息:" + evt.data); ws.close(); }; ws.onclose = function() { console.log("WebSocket 已关闭"); }; ``` 服务器代码: ```javascript const WebSocket = require('ws'); const wss = new WebSocket.Server({ port: 8080 }); wss.on('connection', function connection(ws) { console.log('服务端连接成功'); ws.on('message', function incoming(message) { console.log('服务端收到消息: %s', message); ws.send('服务端发送消息'); }); ws.on('close', function() { console.log('服务端连接关闭'); }); }); ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值