websocket 简单入门 代码 前后端

websocket 就是为了 前后端一直交互的，建立一次连接 可以进行多次信息传输

前端代码

这边 ws 里面的连接 地址按自己的 来修改 后面的地址是 在后端的注解@ServerEndpoint（） 上的

<script src="jquery.js"></script>
 <script src="https://cdn.bootcss.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>

<script>

    var websocket = null;
    //判断当前浏览器是否支持WebSocket，是则创建WebSocket
    if ('WebSocket' in window) {
        console.log("浏览器支持Websocket");
        websocket = new WebSocket("ws://localhost:8080/websocket/test");
    } else {
        alert('当前浏览器 Not support websocket')
    }

    //连接发生错误的回调方法
    websocket.onerror = function () {
        console.log("WebSocket连接发生错误");
        setMessageInnerHTML("WebSocket连接发生错误");
    };
    //连接成功建立的回调方法
    websocket.onopen = function () {
//    setMessageInnerHTML("WebSocket连接成功");
        console.log("WebSocket连接成功");
    }
    //接收到消息的回调方法
    websocket.onmessage = function (event) {
        if (event.data) {
            setMessageInnerHTML(event.data);
        }
        console.log(event.data);
    }
    //连接关闭的回调方法
    websocket.onclose = function () {
        console.log("WebSocket连接关闭");
    }

    //关闭WebSocket连接
    function closeWebSocket() {
        websocket.close();
    }

    //发送消息
    function send() {
        var message = document.getElementById('text').value;
        websocket.send(message);
    }

    // 建立连接的方法
    function openWebSocket() {
        // websocket = new WebSocket("ws://localhost:8888/websocket/乔丹");
        websocket = new websocket("ws://localhost:8080/websocket/test");
        websocket.onopen = function () {
//    setMessageInnerHTML("WebSocket连接成功");
            console.log("WebSocket连接成功");
        }
    }


    //将消息显示在网页上

    function setMessageInnerHTML(innerHTML) {

        document.getElementById('message').innerHTML += innerHTML + '<br/>';

    }

    //如果websocket连接还没断开就关闭了窗口，后台server端会抛异常。
    //所以增加监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接
    window.onbeforeunload = function () {
        closeWebSocket();
    }


</script>

后端代码

后端的话 要 先导入依赖--

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

然后配置放入bean 这边写一个类

@Configuration
public class Websocktconfig {

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

}

之后就是 正式开始写

这里写了 三个 注解 一个广播发送消息 想单独发送消息 可以把set换成 map来装websocket

package person.websocket;


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.io.IOException;
import java.util.concurrent.CopyOnWriteArraySet;

@Component
@Slf4j
@ServerEndpoint("/websocket/test")
public class Websocket {

    private Session session;



    public static CopyOnWriteArraySet<Websocket> set = new CopyOnWriteArraySet<>() ;

    @OnOpen
    public void onOpean(Session session){
        this.session = session;
        set.add(this);
        log.info("websocket建立连接"+"连接总数 "+set.size());
    }


    @OnClose
    public void onClose(){

        set.remove(this);
        log.info("websocket关闭连接"+set.size());

    }

    @OnMessage
    public void onMessage(String mes){

        log.info("收到的消息"+mes);
    }


    public static void sendmes(String s){

        log.info("像前端发送消息");
        for (Websocket websocket : set) {
            try {
                websocket.session.getBasicRemote().sendText(s);
            } catch (IOException e) {
                e.printStackTrace();
            }
        }

    }





}

启动后 本地运行：

我这边开了两个窗口 显示为2

写了个接口 --》测试发送消息：

这边我就直接用浏览器访问了