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('链接已断开')
},
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;
}
配置类
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();
}
}
}
这样就可以连接了