websocket简单实例

Websocket的简单实例

1. websocket运用场景：

   客户使用手机在网上下单外卖，服务器收到此请求后，需将有订单的信息推送给商家，此时利用websocket可以实现商家不刷新界面，服务器主动推送有订单的信息。

2. 导入依赖

<!-- webSocket:Begin -->
		<dependency>
			<groupId>org.springframework</groupId>
			<artifactId>spring-websocket</artifactId>
			<version>${spring.version}</version>
		</dependency>
		<dependency>
			<groupId>org.springframework</groupId>
			<artifactId>spring-messaging</artifactId>
			<version>${spring.version}</version>
		</dependency>
		<dependency>
			<groupId>javax.websocket</groupId>
			<artifactId>javax.websocket-api</artifactId>
			<version>1.1</version>
			<scope>provided</scope>
		</dependency>
		<dependency>
			<groupId>javax</groupId>
			<artifactId>javaee-api</artifactId>
			<version>7.0</version>
		</dependency>
           

1. 将websocket工具类文件放入项目下

   工具文件下载：

   链接：https://pan.baidu.com/s/1DfaE_pxQL7td_RGmSeViJg

   提取码：qwer

   复制这段内容后打开百度网盘手机App，操作更方便哦

2. 调用接口demo

public void websocket() {
		Map<String, Object> showMap = new HashMap<String, Object>();
		com.alibaba.fastjson.JSONObject jsonObject = new com.alibaba.fastjson.JSONObject();
		try {
//            showMap.put("picurl",picurl);
//            showMap.put("similar",similar);
//            showMap.put("sequence",sequence);
//            List<String> list=new ArrayList<>();
//            String name="id";
//            list= NameInfoUtils.getNameKey(name);
//            for (String userid:list){
//                WebSocketServer.singleSend(jsonObject.toJSONString(showMap), userid);
//            }
			List<User> userList =   UserUtils.getUserListByRoleName("生产调度");
			//showMap为欲传递的信息等，id为websocket登记在列的唯一标识符
			//可循环通知不同的人
			for(User u :userList){
				WebSocketServer.singleSend(jsonObject.toJSONString(showMap), u.getId());
			}
			System.out.println("----------------图片上传websocket运行中-------");
		}catch (Exception e){
			e.printStackTrace();
		}

	}
           

1. 前端websocket代码

//当websocket启动后，此界面需要一个唯一标识符加入用户池，当调用websocket后，
     // websocket会根据此id推送给对应用户
         var str = "${userId}";
         //此ip地址为服务器端网络ip地址
            var ip="${ip}";
            connect();
            function connect() {
            //当协议为HTTPS协议时ws改为wss
                var url = "ws://"+ip+"/graphOnBoard/" + str;
                
                ws = new WebSocket(url);

                ws.onopen = function () {
                    console.log("websocket已打开");
                    removeProcessbar();
                };

                ws.onmessage = function (event) {
                    console.log("websocket 开始");
                   // initData(event);
                   //将数据封装到obj中
                   var obj=eval("("+event.data+")");
                   //取数据
                  var id=obj.id;
                    $(grid_selector).trigger("reloadGrid");
                    console.log("websocket 成功");
                   removeProcessbar();
                };

                ws.onclose = function (event) {
                    console.log("websocket 关闭");
                     removeProcessbar();
                };
                ws.onerror = function (event) {
                    console.log("websocket 出错");
                    removeProcessbar();
                };
            }
            //建立连接时移除页面加载的进度条（实则是ajax误认）
            function removeProcessbar() {
                var $progress = $('.pace-progress');
                if ($progress.length > 0) {
                    $progress.closest("div.pace").remove();
                }
            }
            //页面即将跳转到其他页面，或者即将关闭时，关闭web socket连接
            $(document).on('ajaxloadstart.page', function (e) {
                if (ws != null) {
                    //关闭连接
                    ws.close();
                    ws = null;
                }
            });