gorilla websocket无法跨域_了解 WebSocket 及用 Spring Boot + WebSocket 实现消息推送。

↑ 点击上面 “时代Java”关注我们, 关注新技术,学习新知识!

引言

在一个完善的即时通讯应用中,websocket是极其关键的一环,它为web应用的客户端和服务端提供了一种全双工的通信机制,但由于它本身以及其底层依赖的TCP连接的不稳定性,开发者不得不为其设计一套完整的保活、验活、重连方案,才能在实际应用中保证应用的即时性和高可用性。就重连而言,其速度严重影响了上层应用的“即时性”和用户体验,试想打开网络一分钟后,微信还不能收发消息的话,是不是要抓狂?

因此,如何在网络变更时快速恢复websocket的可用,就变得尤为重要。

快速了解websocet

Websocket诞生于2008年,在2011年成为国际标准,现在所有的浏览器都已支持。它是一种全新的应用层协议,是专门为web客户端和服务端设计的真正的全双工通信协议,可以类比HTTP协议来了解websocket协议。

它们的不同点:

  • HTTP的协议标识符是http,websocket的是ws

  • HTTP请求只能由客户端发起,服务器无法主动向客户端推送消息,而websocket可以

  • HTTP请求有同源限制,不同源之间通信需要跨域,而websocket没有同源限制

相同点:

  • 都是应用层的通信协议

  • 默认端口一样,都是80或443

  • 都可以用于浏览器和服务器间的通信

  • 都基于TCP协议

两者和TCP的关系图:

5470872a4dca914264015f5a20769f5d.png

Spring Boot + WebSocket实时消息推送
一、任务要求

商家的后台管理系统实现新订单提醒推送功能,利用Spring Boot + WebSocket实时消息推送的方式进行实现。

二、实现代码
2.1  前端html代码
<html>    <head>        <meta charset="UTF-8">        <title>WebSockettitle>    head>    <body>        <input id="url" type="text" size="60" value="ws://localhost:8080/web_socket/order_notification/M666666" />        <button onclick="openWebSocket()">打开WebSocket连接button>        <button onclick="closeWebSocket()">关闭WebSocket连接button>            <div id="message">div>    body>    <script type="text/javascript">       var websocket = null;   function openWebSocket() {      var url = document.getElementById('url').value.trim();      //判断当前浏览器是否支持WebSocket            if ('WebSocket' in window) {            websocket = new WebSocket(url);      } else {            alert('当前浏览器 Not support websocket')      }      //连接发生错误的回调方法            websocket.onerror = function() {            setMessageInnerHTML("WebSocket连接发生错误");      };      //连接成功建立的回调方法            websocket.onopen = function() {            setMessageInnerHTML("WebSocket连接成功");      }      //接收到消息的回调方法            websocket.onmessage = function(event) {            setMessageInnerHTML(event.data);      }      //连接关闭的回调方法            websocket.onclose = function() {            setMessageInnerHTML("WebSocket连接关闭");      }    }    //监听窗口关闭事件,当窗口关闭时,主动去关闭websocket连接,防止连接还没断开就关闭窗口,server端会抛异常。        window.onbeforeunload = function() {        closeWebSocket();    }    //将消息显示在网页上        function setMessageInnerHTML(innerHTML) {        document.getElementById('message').innerHTML += innerHTML + '
'; } //关闭WebSocket连接 function closeWebSocket() { websocket.close(); }script>html>
2.2   服务端代码

引入依赖,我使用的是SpringBoot版本2.2.6.RELEASE,自动管理依赖版本

<dependency>      <groupId>org.springframework.bootgroupId>      <artifactId>spring-boot-starter-websocketartifactId>dependency>

配置类WebSocketConfig,扫描并注册带有@ServerEndpoint注解的所有websocket服务端

import org.springframework.context.annotation.Bean;import org.springframework.context.annotation.Configuration;import org.springframework.web.socket.server.standard.ServerEndpointExporter;/** * @description 开启WebSocket支持 * @date 2020-04-08 */@Configurationpublic class WebSocketConfig {    @Bean    public ServerEndpointExporter serverEndpointExporter() {        return new ServerEndpointExporter();    }}

新建WebSocketServer类,WebSocket服务端是多例的,一次WebSocket连接对应一个实例

import org.springframework.stereotype.Component;import javax.websocket.*;import javax.websocket.server.PathParam;import javax.websocket.server.ServerEndpoint;import java.io.IOException;import java.util.ArrayList;import java.util.List;import java.util.concurrent.ConcurrentHashMap;/** * @description 订单通知 * @date 2020-04-08 */@Component@ServerEndpoint("/web_socket/order_notification/{merchantId}")public class OrderNotificationWebSocket {    static final ConcurrentHashMap> webSocketClientMap= new ConcurrentHashMap<>();    /**     * 连接建立成功时触发,绑定参数     * @param session 与某个客户端的连接会话,需要通过它来给客户端发送数据     * @param merchantId 商户ID     */    @OnOpen    public void onOpen(Session session,@PathParam("merchantId") String merchantId){        WebSocketClient client = new WebSocketClient();        client.setSession(session);        client.setUri(session.getRequestURI().toString());        List webSocketClientList = webSocketClientMap.get(merchantId);        if(webSocketClientList == null){            webSocketClientList = new ArrayList<>();        }        webSocketClientList.add(client);        webSocketClientMap.put(merchantId, webSocketClientList);    }    /**     * 连接关闭时触发,注意不能向客户端发送消息了     * @param merchantId     */    @OnClose    public void onClose(@PathParam("merchantId") String merchantId){        webSocketClientMap.remove(merchantId);    }    /**     * 通信发生错误时触发     * @param session     * @param error     */    @OnError    public void onError(Session session, Throwable error) {        System.out.println("发生错误");        error.printStackTrace();    }    /**     * 向客户端发送消息     * @param merchantId     * @param message     */    public static void sendMessage(String merchantId,String message){        try {            List webSocketClientList = webSocketClientMap.get(merchantId);            if(webSocketClientList!=null){                for(WebSocketClient webSocketServer:webSocketClientList){                    webSocketServer.getSession().getBasicRemote().sendText(message);                }            }        } catch (IOException e) {            e.printStackTrace();            throw new RuntimeException(e.getMessage());        }    }}

辅助类

import javax.websocket.Session;/** * @description WebSocket客户端连接 * @date 2020-04-08 */@Datapublic class WebSocketClient {    // 与某个客户端的连接会话,需要通过它来给客户端发送数据    private Session session;    //连接的uri    private String uri;}

新建一个测试类,用于向客户端发送推送消息

import io.swagger.annotations.Api;import io.swagger.annotations.ApiOperation;import org.springframework.web.bind.annotation.GetMapping;import org.springframework.web.bind.annotation.RequestParam;import org.springframework.web.bind.annotation.RestController;/** * @description * @date 2020-04-08 */@Api(tags = "WebSocket-test")@RestController("notification")public class OrderNotificationWebSocketController {    @ApiOperation("通知test")    @GetMapping    public void test(@RequestParam String merchantId){        OrderNotificationWebSocket.sendMessage(merchantId,"有新订单啦");    }}
三、推送消息测试

1、 启动服务器程序,提供WebSocket服务。

2 、打开前端html客户端页面,连接WebSocket服务器。

4d6d533a0659fa6f95e13335623529ec.png

连接WebSocket服务器

3、向客户端发送推送消息

1889e1c13453073e09881203d577905e.png

向客户端发送推送消息

4、客户端收到新订单推送消息

4e922dbb93bca5f22d44d1be13711a5c.png

客户端收到新订单推送消息

四、Nginx部署支持WebSocket的配置

当我们在本地开采用WebSocket用IP连接时是OK的,例如

ws://39.108.*.186:8002/web_socket/order_notification/123

当我们上线后,用Nginx部署,并用域名连接时就会失败。此时只需要在Nginx配置文件里加入一些配置即可。配置如下

server{  listen 80;  server_name test.com  www.test.com;  # 访问WebSocket  location /web_socket{    proxy_pass http://47.*.27.1:8002;    proxy_set_header Host $host;    #启用支持websocket连接    proxy_set_header Upgrade $http_upgrade;    proxy_set_header Connection "upgrade";  }}.....

--

知识分享,时代前行!

~~ 时代Java

还有更多好文章……

请查看历史文章和官网,

↓有分享,有收获~

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值