简单的WebSocket例子

最新推荐文章于 2024-05-03 10:35:21 发布

怪叔叔爱猫猫

最新推荐文章于 2024-05-03 10:35:21 发布

阅读量2.1k

点赞数 1

分类专栏：前端文章标签： websocket web

本文链接：https://blog.csdn.net/cain4578369/article/details/78328384

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

首先用Springboot搭建一个web项目~~~

这里写图片描述

index.html页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="display" style="width: 500px;height: 500px;"></div>
<input type="text" id="message">
<button onclick="send()">Send</button>
<script>
    var websocket = null;
    if ("WebSocket" in window) {
        websocket = new WebSocket("ws://localhost:8080/chatroom");
    } else {
        alert("websocket not supported");
    }
    websocket.onopen = function () {
        setMessageInnerHTML("open");
    };
    websocket.onmessage = function (event) {
        setMessageInnerHTML(event.data);
    };
    websocket.onclose = function () {
        setMessageInnerHTML("close");
    };
    websocket.onbeforeunload = function () {
        websocket.close();
    };

    function send() {
        var message = document.getElementById("message").value;
        websocket.send(message);
        document.getElementById("message").value = "";
    }

    function setMessageInnerHTML(message) {
        document.getElementById("display").innerHTML += message + "<br/>";
    }
</script>
</body>
</html>

java Socket页面

package com.example.base.socket;

import org.springframework.stereotype.Component;

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

@ServerEndpoint("/chatroom")
@Component
public class ChatSocket {
    private Session session;
    private static CopyOnWriteArraySet<ChatSocket> set = new CopyOnWriteArraySet<>();

    @OnOpen
    public void onOpen(Session session) {
        this.session = session;
        set.add(this);
        System.out.println("socket open");
    }

    @OnClose
    public void onClose() {
        set.remove(this);
        System.out.println("socket close");
    }

    @OnMessage
    public void onMessage(String message) {
        System.out.println("from client:" + message);
        for (ChatSocket socket : set) {
            try {
                socket.sendMessage(message);
            } catch (IOException e) {
            }
        }
    }

    @OnError
    public void onError(Throwable error) {
        System.out.println("error occurred");
        error.printStackTrace();
    }

    private void sendMessage(String message) throws IOException {
        this.session.getBasicRemote().sendText(message);
    }
}

Socket配置类

package com.example.base;

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

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

测试效果

这里写图片描述

怪叔叔爱猫猫

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
2
评论
简单的WebSocket例子

首先用Springboot搭建一个web项目~~~ index.html页面<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><div id="display" style="width: 500px;height: 500px;"
复制链接

扫一扫