nginx配置websocket连接

1.vue中配置websocket连接

data中添加属性

socket: null,

配置websocket连接信息

if (typeof (WebSocket) === 'undefined') {
        this.$message({
          message: '您的浏览器不支持socket',
          type: 'error'
        })
      } else {
        // 实例化socket
        this.socket = new WebSocket('ws://10.111.106.73:80//ws/webSocketServer.do')
        // 监听socket连接
        this.socket.onopen = this.openSocket
        // 监听socket错误信息
        this.socket.onerror = this.errorSocket
        // 监听socket消息
        this.socket.onmessage = this.getMessageSocket
        // 关闭socket消息
        this.socket.onclose = this.closeSocket
      }

配置连接打开关闭和获取信息的方法

openSocket() {
      console.log('已建立链接')
    },
 
    errorSocket() {
      console.log('建立链接失败')
    },
    getMessageSocket(res) {
      // 接收到信息
    },
 
    sendSocket() {
      // this.socket.send('建立链接')
    },
 
    closeSocket() {
      console.log('链接已断开')
    },

2.nginx配置websocket连接

server {
        listen       80;
        server_name  localhost;
    	add_header Set-Cookie "XAuthorization=$arg_token";
    	add_header Set-Cookie "Authorization=$http_authorization";
		location ~* \.(html|htm|js|css|png|gif|jpg|jpej|rar|zip|svg|json)$ {
			root   html;
			index  index.html index.htm;
		}
 
 
		location /ws/ { 
			proxy_pass http://localhost:8070/;        #通过配置端口指向部署websocker的项目
			proxy_http_version 1.1;  
			proxy_set_header Upgrade $http_upgrade;  
			proxy_set_header Connection "Upgrade";  
			proxy_set_header X-real-ip $remote_addr;
			proxy_set_header X-Forwarded-For $remote_addr;
		}
		client_max_body_size 100m;
 
    }

3.spring boot后台配置websocekt连接

配置类

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.DefaultServletHandlerConfigurer;
import org.springframework.web.servlet.config.annotation.EnableWebMvc;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter;
import org.springframework.web.socket.config.annotation.EnableWebSocket;
import org.springframework.web.socket.config.annotation.WebSocketConfigurer;
import org.springframework.web.socket.config.annotation.WebSocketHandlerRegistry;
 
 
/**
 * @author wenyoulong
 */
@Configuration
@EnableWebSocket
@EnableWebMvc
public class WebSocketConfig extends WebMvcConfigurerAdapter implements WebSocketConfigurer {
 
    @Override
    public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {
        registry.addHandler(new SystemWebSocketHandler(), "/webSocketServer.do").addInterceptors(new WebSocketInterceptor()).setAllowedOrigins("*");
    }
 
    @Override
    public void configureDefaultServletHandling(DefaultServletHandlerConfigurer configurer) {
        configurer.enable();
    }
}

拦截器

import org.springframework.http.server.ServerHttpRequest;
import org.springframework.http.server.ServerHttpResponse;
import org.springframework.stereotype.Component;
import org.springframework.web.socket.WebSocketHandler;
import org.springframework.web.socket.server.support.HttpSessionHandshakeInterceptor;
 
import java.util.Map;
 
/**
 * @author wenyoulong
 */
@Component
public class WebSocketInterceptor extends HttpSessionHandshakeInterceptor {
 
    @Override
    public boolean beforeHandshake(ServerHttpRequest request, ServerHttpResponse response, WebSocketHandler wsHandler,
                                   Map<String, Object> attributes) throws Exception {
        System.out.println("握手前");
        if(request.getHeaders().containsKey("Sec-WebSocket-Extensions")) {
            request.getHeaders().set("Sec-WebSocket-Extensions", "permessage-deflate");
        }
        return true;
    }
 
    @Override
    public void afterHandshake(ServerHttpRequest request, ServerHttpResponse response, WebSocketHandler wsHandler, Exception ex) {
        super.afterHandshake(request, response, wsHandler, ex);
    }
 
}

websocket处理业务

import org.springframework.stereotype.Component;
import org.springframework.web.socket.*;
 
import java.io.IOException;
import java.util.ArrayList;
import java.util.List;
 
/**
 * @author wenyoulong
 */
@Component
public class SystemWebSocketHandler implements WebSocketHandler {
    private static List<WebSocketSession> socketSessions = new ArrayList<>();
 
    @Override
    public void afterConnectionClosed(WebSocketSession session, CloseStatus closeStatus) throws Exception {
        socketSessions.remove(session);
    }
 
    @Override
    public void handleTransportError(WebSocketSession session, Throwable exception) throws Exception {
 
    }
 
    @Override
    public void handleMessage(WebSocketSession session, WebSocketMessage<?> message) throws Exception {
        if (message instanceof TextMessage) {
            handlerTextMessage(session, (TextMessage) message);
        }
    }
 
    @Override
    public void afterConnectionEstablished(WebSocketSession session) throws Exception {
        System.out.println("连接建立");
        socketSessions.add(session);
    }
 
    @Override
    public boolean supportsPartialMessages() {
        return false;
    }
 
 
 
    /**
     * 处理文本消息
     *
     * @throws IOException
     **/
    private void handlerTextMessage(WebSocketSession session, TextMessage message) throws IOException {
        String payLoad = message.getPayload();
        System.out.println("接受的消息:"+payLoad);
    }
    /**
     * 给所有在线用户发送消息
     *
     * @param message
     */
    public void sendMessageToUsers(TextMessage message) {
        try {
            for(WebSocketSession socketSession:socketSessions){
                socketSession.sendMessage(message);
            }
        } catch (IOException e) {
            e.printStackTrace();
        }
    }
}

这样就可以连接了