- Websocket使用 ws 或 wss 的统一资源标志符，类似于 HTTP 或 HTTPS，其中 wss 表示在 TLS 之上的 Websocket ，相当于 HTTPS 了。
- 默认情况下，Websocket 的 ws 协议使用 80 端口；运行在TLS之上时，wss 协议默认使用 443 端口。其实说白了，wss 就是 ws 基于 SSL 的安全传输，与 HTTPS 一样样的道理
配置Nginx支持wss
# 我的配置在https的nginx下面
location /usign {
proxy_pass http://127.0.0.1:9990/;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header REMOTE-HOST $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
client_max_body_size 5000M;
}
代码中的使用
vue中配置
- 我这里用在了vue里面，工程使用的脚手架。websocket用在了app.vue里面，因为我的是全局的监听。从服务器上面回来的数据，可以通过vue的store来改变其他页面的数据
<script>
import { mapState, mapMutations } from 'vuex'
export default {
name: 'App',
data () {
return {
websock: null,
reconnectData: null,
lockReconnect: false,
timeout: 10000,
timeoutObj: null,
serverTimeoutObj: null
}
},
computed: {
...mapState([
'currentUser',
'identificationDevice',
'logshow'
])
},
created () {
document.title = ''
this.initWebSocket()
},
methods: {
...mapMutations([
'updatePromptBtn',
'updateIpaName'
]),
initWebSocket () {
if (this.websock !== null) {
this.websock.close()
this.websock = null
}
let wsurl = ''
if (this.baseUrl.indexOf('192') === -1) {
let url = this.baseUrl.substr(this.baseUrl.indexOf('www'))
wsurl = 'wss://' + url + '/websocket'
} else {
let url = this.baseUrl.substr(this.baseUrl.indexOf('192'))
wsurl = 'ws://' + url + '/websocket'
}
if (this.logshow) {
console.log('启动中' + wsurl)
}
this.websock = new WebSocket(wsurl)
this.websock.onopen = this.websocketonopen
this.websock.onmessage = this.websocketonmessage
this.websock.onerror = this.websocketonerror
this.websock.onclose = this.websocketclose
},
websocketonopen () {
if (this.logshow) {
console.log('连接成功')
}
this.heartBeat()
},
websocketonerror () {
if (this.logshow) {
console.log('连接失败')
}
this.reconnect()
},
websocketclose () {
if (this.logshow) {
console.log('断开连接')
}
this.reconnect()
},
websocketonmessage (msg) {
let data = JSON.parse(msg.data)
if (data.type === 'heartBeat') {
if (this.logshow) {
console.log('收到心跳回复:' + data.type)
}
this.heartBeat()
}
if (this.currentUser === undefined || this.currentUser == null) {
return
}
if (this.identificationDevice !== data.identificationDevice) {
if (this.logshow) {
console.log('收到不是自己的:from', data.identificationDevice)
}
return
}
if (this.logshow) {
console.log('收到消息: ' + msg.data)
}
// 这里定义自己的逻辑
},
websocketsend (data) {
this.websock.send(JSON.stringify(data))
},
reconnect () {
if (this.lockReconnect) {
return
}
this.lockReconnect = true
this.reconnectData && clearTimeout(this.reconnectData)
this.reconnectData = setTimeout(() => {
this.initWebSocket()
this.lockReconnect = false
}, 5000)
},
heartBeat () {
this.timeoutObj && clearTimeout(this.timeoutObj)
this.serverTimeoutObj && clearTimeout(this.serverTimeoutObj)
this.timeoutObj = setTimeout(() => {
this.websocketsend({ type: 'heartBeat' })
this.serverTimeoutObj = setTimeout(() => {
this.websock.close()
}, 5000)
}, this.timeout)
}
},
destroyed () {
this.lockReconnect = true
this.websock.close()
clearTimeout(this.reconnectData)
clearTimeout(this.timeoutObj)
clearTimeout(this.serverTimeoutObj)
}
}
</script>
Java中配置
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-websocket</artifactId>
</dependency>
/**
* 开启WebSocket支持
*/
@Configuration
public class WebSocketConfig {
@Bean
public ServerEndpointExporter serverEndpointExporter() {
return new ServerEndpointExporter();
}
}
@ServerEndpoint("/websocket")
@Component
public class WebSocketServer extends BaseService{
static Log log=LogFactory.get(WebSocketServer.class);
private static CopyOnWriteArraySet<WebSocketServer> webSocketServers = new CopyOnWriteArraySet<>();
private Session session;
/**
* 连接建立成功调用的方法*/
@OnOpen
public void onOpen(Session session) {
this.session = session;
webSocketServers.add(this);
try {
sendMessage("与后端连接成功");
} catch (IOException e) {
log.error("网络异常!!!!!!");
}
}
/**
* 连接关闭调用的方法
*/
@OnClose
public void onClose() {
log.info("连接关闭");
webSocketServers.remove(this);
}
/**
* 收到客户端消息后调用的方法
*
* @param message 客户端发送过来的消息*/
@OnMessage
public void onMessage(String message) throws IOException {
log.info("报文:"+message);
JSONObject jsonObject = JSON.parseObject(message);
Object type = jsonObject.get("type");
if (type != null && type.equals("heartBeat")) {
sendMessage(message);
}
}
/**
*
* @param session
* @param error
*/
@OnError
public void onError(Session session, Throwable error) {
log.error("onError原因:"+error.getMessage());
error.printStackTrace();
}
/**
* 实现服务器主动推送
*/
public void sendMessage(String message) throws IOException {
this.session.getBasicRemote().sendText(message);
}
/**
* 发送自定义消息
* */
public static void sendInfo(Map message) throws IOException {
String msg = JSON.toJSONString(message);
log.info("发送消息报文:" + msg);
for (WebSocketServer webSocketServer:webSocketServers) {
webSocketServer.sendMessage(msg);
}
}
}
@GetMapping(value = "/update/config")
public RestResponse updateMobileconfig(
@RequestParam String key,
@RequestParam String type,
@RequestParam String identificationDevice
) throws IOException {
Map<String, String> map = new HashMap();
map.put("identificationDevice", identificationDevice);
map.put("key", key);
map.put("type", type);
WebSocketServer.sendInfo(map);
return RestResponse.success();
}
以上都是简单的使用，如果对你有用这是最好
网友评论