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来改变其他页面的数据

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)

}

}

Java中配置

1、引入依赖

org.springframework.boot

spring-boot-starter-websocket

2、添加WebSocketConfig

/**

* 开启WebSocket支持

*/

@Configuration

public class WebSocketConfig {

@Bean

public ServerEndpointExporter serverEndpointExporter() {

return new ServerEndpointExporter();

}

}

3、写服务类WebSocketServer

@ServerEndpoint("/websocket")

@Component

public class WebSocketServer extends BaseService{

static Log log=LogFactory.get(WebSocketServer.class);

private static CopyOnWriteArraySet 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);

}

}

}

4、在需要的地方发送消息

@GetMapping(value = "/update/config")

public RestResponse updateMobileconfig(

@RequestParam String key,

@RequestParam String type,

@RequestParam String identificationDevice

) throws IOException {

Map map = new HashMap();

map.put("identificationDevice", identificationDevice);

map.put("key", key);

map.put("type", type);

WebSocketServer.sendInfo(map);

return RestResponse.success();

}

以上都是简单的使用，如果对你有用这是最好