Spring Boot WebSocket整合及nginx配置

一:Spring Boot WebSocket整合

創建一個maven項目,加入如下依賴

<dependencyManagement>
	<dependencies>
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-dependencies</artifactId>
			<version>1.4.0.RELEASE</version>
			<scope>import</scope>
			<type>pom</type>
		</dependency>
	</dependencies>
</dependencyManagement>

<dependencies>
	<dependency>
		<groupId>org.springframework.boot</groupId>
		<artifactId>spring-boot-starter-web</artifactId>
	</dependency>
	<dependency>
		<groupId>org.springframework.boot</groupId>
		<artifactId>spring-boot-starter-websocket</artifactId>
	</dependency>
</dependencies>
代碼如下:

package com.wh.web;

import org.springframework.web.socket.TextMessage;
import org.springframework.web.socket.WebSocketSession;
import org.springframework.web.socket.handler.TextWebSocketHandler;

public class CountWebSocketHandler extends TextWebSocketHandler {

	private static long count = 0;
	protected void handleTextMessage(WebSocketSession session, TextMessage message) throws Exception {
		session.sendMessage(new TextMessage("你是第" + (++count) + "位訪客"));
	}
}
package com.wh.web;

import org.springframework.context.annotation.Configuration;
import org.springframework.web.socket.config.annotation.WebSocketConfigurer;
import org.springframework.web.socket.config.annotation.WebSocketHandlerRegistry;

@Configuration
public class WebsocketConfiguration implements WebSocketConfigurer {
	public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {
		registry.addHandler(new CountWebSocketHandler(), "/web/count");
	}
}
package com.wh.web;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.web.socket.config.annotation.EnableWebSocket;

@EnableWebSocket
@SpringBootApplication
public class ServerApp {
	public static void main(String[] args) {
		SpringApplication.run(ServerApp.class, args);
	}
}
application.properties 內容如下:

server.port=9080
spring.resources.static-locations=classpath:/webapp/html/
src/main/resources/webapp/html/index.html  內容如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>web socket</title>
</head>
<body>
<h1>web socket</h1>
<script type="text/javascript">
	var url = 'ws://'+window.location.hostname+':9080/web/count';
	var ws = new WebSocket(url);  
	ws.onopen = function(event)
    {  
        ws.send('hello');  
    };  
    
	ws.onmessage = function(event) {
		alert(event.data);
	};
	
	ws.onerror = function(event) {
		alert(event);
	}
</script>
</body>
</html>

最後,啓動main方法,訪問http://127.0.0.1:9080/index.html即可看到輸出


二:nginx配置
nginx 通過在客戶端和後端服務器之間建立起一條隧道來支持WebSocket。
爲了使nginx可以將來自客戶端的Upgrade請求發送給後端服務器,Upgrade和Connection的頭信息必須被顯式的設置。如下所示:

location /web/count {
	    proxy_pass http://tomcat-server;
	    proxy_redirect off;
	    proxy_http_version 1.1;
	    proxy_set_header Upgrade $http_upgrade;
	    proxy_set_header Connection "upgrade";
        proxy_set_header Host $host:$server_port;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;	
}

一旦我們完成以上設置,nginx就可以處理WebSocket連接了。

注意,必須要有  

proxy_set_header Host $host:$server_port;   

這個配置

否則,會報:

WebSocket connection to 'ws://192.168.1.104:9080/web/count' failed: Error during WebSocket handshake: Unexpected response code: 403

的錯誤

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章