vue前端websocket连接不上springboot,报错Connection closed before receiving a handshake response

搞定了,我的代码写的基本没有问题,毕竟都是按着教程一步一步来的,主要问题在于,我的开发环境和教程不一致,我是前后端分离,请求8080即请求的前端项目,当然会超时然后建立连接失败。我查看了一下前后端各自的端口:前端8080,后端63000,然后把

this.sock = new WebSocket("ws:localhost:8080/websocket");//建立连接

改成

this.sock = new WebSocket("ws:localhost:63000/websocket");//建立连接

就可以了,换成后端的端口号。


以下是原问题

照着网上的教程写的例子,整合到自己的项目中。前端用vue写的,js里几乎和教程一模一样,主要问题在于

this.sock = new WebSocket("ws:localhost:8080/websocket");//建立连接

创建的websocket内的方法都是null,如图:
图片说明


然后观察控制台内过了一段时间报错,提示:

WebSocket connection to 'ws://localhost:8080/websocket' failed: Connection closed before receiving a handshake response

控制台错误详情见图:
图片说明


前端代码:

webSocket() {
      debugger;
      // 建立socket连接
      if ('WebSocket' in window) {//判断当前浏览器是否支持webSocket
          // this.sock = new WebSocket("ws:localhost:8080/bootTest/websocket");//建立连接(带后端项目名)
          this.sock = new WebSocket("ws:localhost:8080/websocket");//建立连接(不带后端项目名)
      } else {
        alert('你的浏览器暂不支持websocket :(');
      }
      var sock = this.sock;
      console.log(sock);

      sock.onopen = function (e) {//成功建立连接
          console.log(e);
      };
      sock.onmessage = function (e) {//接收到消息
          console.log(e)
          $(".message").append("<p><font color='red'>"+e.data+"</font>")
      };
      sock.onerror = function (e) {//连接发生错误
          console.log(e);
      };
      sock.onclose = function (e) {//连接关闭
          console.log(e);
      };
      ////监听窗口关闭事件,当窗口关闭时,主动去关闭websocket连接,防止连接还没断开就关闭窗口,server端会抛异常。
      window.onbeforeunload = function(){
          websocket.close();
      };
    }




后端代码:

import java.io.IOException;
import java.util.concurrent.CopyOnWriteArraySet;

import javax.websocket.server.PathParam;
import javax.websocket.server.ServerEndpoint;

import javax.websocket.*;

import lombok.extern.slf4j.Slf4j;

@Slf4j
@ServerEndpoint("/websocket")
public class WebSocketServer {
    //静态变量,用来记录当前在线连接数。应该把它设计成线程安全的。
    private static int onlineCount = 0;
    //concurrent包的线程安全Set,用来存放每个客户端对应的MyWebSocket对象。
    private static CopyOnWriteArraySet<WebSocketServer> webSocketSet = new CopyOnWriteArraySet<WebSocketServer>();

    //与某个客户端的连接会话,需要通过它来给客户端发送数据
    private Session session;

    /**
     * 连接建立成功调用的方法*/
    @OnOpen
    public void onOpen(Session session) {
        this.session = session;
        webSocketSet.add(this);     //加入set中
        addOnlineCount();           //在线数加1
        log.info("有新连接加入!当前在线人数为" + getOnlineCount());
        try {
             sendMessage("连接成功");
        } catch (IOException e) {
            log.error("websocket IO异常");
        }
    }
    //  //连接打开时执行
    //  @OnOpen
    //  public void onOpen(@PathParam("user") String user, Session session) {
    //      currentUser = user;
    //      System.out.println("Connected ... " + session.getId());
    //  }

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

    /**
     * 收到客户端消息后调用的方法
     * @param message 客户端发送过来的消息
     */
    @OnMessage
    public void onMessage(String message, Session session) {
        log.info("来自客户端的消息:" + 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) {
        log.error("发生错误");
        error.printStackTrace();
    }


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


    /**
     * 群发自定义消息
     * */
    public static void sendInfo(String message) throws IOException {
        log.info(message);
        for (WebSocketServer item : webSocketSet) {
            try {
                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--;
    }
}

qq_34075464
浅笑临轩 回复qq_40821261: 时间过得太久,已经忘了, 这是当时写的博,你看看有没有帮助
2 个月之前 回复
qq_34075464
浅笑临轩 回复qq_40821261: https://blog.csdn.net/qq_34075464/article/details/101532293#comments
2 个月之前 回复
qq_40821261
qq_40821261 解决了吗?
2 个月之前 回复
qq_40821261
qq_40821261 大哥,遇到同样的问题了
2 个月之前 回复

1个回答

qq_34075464
浅笑临轩 感谢回答,不过还是老样子,要么连接超时,要么就握手前就关闭了连接。总是还是连不上,我都直接把js复制过去了。
11 个月之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问