websocket

简介: 前端页面的实时刷新一般两种思路,即拉和推的思路: 拉:前端每隔一段时间到后台请求数据; 推:后端需要推送数据时,向前端推送数据。 没有特殊需求的话,一般使用推的方式。websocket是基于TCP的协议,能够实现客户端与服务端全双工通信。

前端页面的实时刷新一般两种思路,即拉和推的思路:

拉:前端每隔一段时间到后台请求数据;
推:后端需要推送数据时,向前端推送数据。

拉的方式比较耗费资源,因为http是无状态且单向的通讯协议,后端无法主动xia向前端发送信息,一般拉为前端不间断的向服务端发送http请求,这种方式前端和后端都比较头疼。没有特殊需求的话,一般使用推的方式。HTML5开始提供websocket解决方式,基于TCP实现客户端与服务端全双工通信。websocket只使用了一个连接,避免了连接的多次建立;且只有连接初次建立比较复杂,后期通信成本较低。

实现方式,前后端通过心跳保持长连接,当后端有数据时,调用通知方法,以消息的方式通知前端。

tomcat7以后开始提供了websocket,基于servlet容器可以使用javax.websocket,后端代码:

@Component
@ServerEndpoint("/websocket")
public class WebSocketResource implements AcknowledgingMessageListener<Integer, String> {

    private static ConcurrentMap<String, Session> socketMap = new ConcurrentHashMap<>();

    private Logger logger = LoggerFactory.getLogger(WebSocketResource.class);

 
    @OnOpen
    public void onOpen(Session session) {
        socketMap.put(session.getQueryString(), session);
    }
 
    @OnClose
    public void onClose(Session session) {
        socketMap.remove(session.getQueryString());
    }
 
    @OnMessage
    public void onMessage(String message, Session session) {
        logger.info("heat beat: " + message + "---" + session.getQueryString());
    }
 
    @OnError
    public void onError(Throwable error) {
        throw new RuntimeException(error);
    }

    @Override
    public void onMessage(ConsumerRecord<Integer, String> consumerRecord, Acknowledgment acknowledgment) {
        String message = consumerRecord.value();
        if (StringUtil.isBlank(message)) {
            return;
        }

        UnDealMsDto unDealMsDto = CommonUtil.jsonToObject(consumerRecord.value(), UnDealMsDto.class);
        sendMessages("refresh-un-deal", socketMap.get(unDealMsDto.getToken()));
    }

    private void sendMessages(String message, Session session) {
        if (StringUtil.isBlank(message) || null == session) {
            return;
        }

        try {
            socketMap.get(session.getQueryString()).getBasicRemote().sendText(message);
        } catch (IOException e) {
            throw new RuntimeException(e);
        }
    }
}

此外,spring也提供了对websocket的支持,可以使用spring-websocket包实现,可以扩展 TextWebSocketHandler,spring监听到 websocket事件后会调用对应的方法。

前端以vue举例:

    initWebSocket() {
      this.websoket = new WebSocket("wss://{your.domain}/websocket?678d1a2132894c6e952bcdc9e0debac1")
      this.websoket.onopen = this.webSocketOnOpen
      this.websoket.onerror = this.webSocketOnError
      this.websoket.onmessage = this.webSocketOnMessage
      this.websoket.onclose = this.webSocketOnClose
    },
    webSocketOnOpen () {
      let me = this;
      setInterval(() => {
          me.webSocketSend(JSON.stringify({ type: "ping" }));
      }, 30000);
    },
    webSocketOnError (e) {
      console.dir(e)
    },
    webSocketOnMessage (e) {
      console.log('data:')
      console.dir(e)
    },
    webSocketSend (data) {
      this.websoket.send(data);
    },
    webSocketOnClose (e) {
      setTimeout(() => {
        this.initWebSocket();
      }, 500);
    },

需要注意的是,没有使用SSL时,协议前缀使用ws,类似http;否则使用wss,类似https。

nginx对websocket做了支持,如使用nginx转发,示例:

    proxy_redirect off;  
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
    proxy_read_timeout 600;
    proxy_pass backend;
目录
相关文章
|
6月前
websocket 的使用
websocket 的使用
|
前端开发 网络协议 API
什么是WebSocket?
WebSocket是一种在单个TCP连接上进行全双工通信的协议。WebSocket通信协议于2011年被IETF定为标准RFC 6455,并由RFC7936补充规范。WebSocket API也被W3C定为标准。
2165 0
什么是WebSocket?
|
2月前
|
移动开发 网络协议 前端开发
H5与WebSocket
H5与WebSocket
|
2月前
|
Web App开发 移动开发 JavaScript
|
3月前
|
网络协议 API 数据安全/隐私保护
websocket初识
websocket初识
44 2
|
4月前
|
Web App开发 定位技术 C#
|
6月前
|
移动开发 网络协议 Java
WebSocket二
WebSocket二
|
6月前
|
移动开发 网络协议 前端开发
WebSocket一
WebSocket一
|
6月前
|
移动开发 网络协议 安全
Websocket
Websocket
|
监控 前端开发 安全
你使用过websocket吗?
你使用过websocket吗?
77 0