webSocket运用

最新推荐文章于 2024-05-29 17:55:17 发布

Ygv587

最新推荐文章于 2024-05-29 17:55:17 发布

阅读量2.3k

点赞数

文章标签： websocket

本文链接：https://blog.csdn.net/weixin_43885814/article/details/121521743

版权

webSocket运用

说明
遇到的困难
页面
- 引入以下的js文件
- heml文件
后台基于springboot
实现效果
- - 刚连接的时候
  - 当接到消息的时候

说明

简单的搭建webSocket，并运用，可以实现当中间件或者redis订阅来消息的时候能够实时的弹窗显示到页面。（平时页面的小广告也可以用webSocket实现某些功能）

遇到的困难

1、时间长了会断开连接

将 websocket = new WebSocket(socketUrl);改为  websocket = new ReconnectingWebSocket(socketUrl);ReconnectingWebSocket这个方法会超时重连。

2、没有写config文件导致没有开启文本socket支持

3、websocket里userid重复，会导致顶掉前面的用户

处理方法：可以用登录的loginId连接服务，发送消息的时候用userId，实现不同的登录用户都能接收到消息。

页面

引入以下的js文件

    <script th:src="@{/js/drag.js}"></script>
    <script th:src="@{/js/socket.io.js}"></script>
    <script th:src="@{/js/reconnecting-websocket.js}"></script>
    <script th:src="@{/js/fullscreen.js}"></script>

heml文件

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <title>My first Vue app</title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
    <script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
    <script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
    <script th:src="@{/js/drag.js}"></script>
    <script th:src="@{/js/socket.io.js}"></script>
    <script th:src="@{/js/reconnecting-websocket.js}"></script>
    <script th:src="@{/js/fullscreen.js}"></script>

</head>
<body>
<div id="app">


</div>

<script type = "text/javascript">
    var vm = new Vue({
        el: '#app',
        data: {

        },
        methods: {

        }
    })


    window.onload = function(){
        var websocket = null;
        //判断当前浏览器是否支持WebSocket
        if ('WebSocket' in window) {
            var username = 1;
            var host = window.location.host;
            var loc = window.location;
            var uri = "";
            if (loc.protocol === "https:") {
                uri = "wss:";
            } else {
                uri = "ws:";
            }
            var socketUrl = uri+"//"+ host +"/login/websocket/99";
            websocket = new ReconnectingWebSocket(socketUrl);
        }
        else {
            alert("当前浏览器 Not support websocket");
        }

        //连接发生错误的回调方法
        websocket.onerror = function () {
            console.log("连接错误");
        };

        //连接成功建立的回调方法
        websocket.onopen = function () {
            console.log("Socket 已打开");
            websocket.send("true");
        }

        //接收到消息的回调方法
        websocket.onmessage = function (event) {
              alert(event.data);
        }

        //连接关闭的回调方法
        websocket.onclose = function () {
            console.log("连接关闭");
        }

        //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
        window.onbeforeunload = function () {
            closeWebSocket();
        }

        //关闭WebSocket连接
        function closeWebSocket() {
            websocket.close();
        }
    }

</script>
</body>
</html>

后台基于springboot

xml文件

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
	<modelVersion>4.0.0</modelVersion>

	<groupId>com.springboot</groupId>
	<artifactId>Spring-Boot-Thymeleaf</artifactId>
	<version>0.0.1-SNAPSHOT</version>
	<packaging>jar</packaging>

	<name>demo</name>
	<description>Demo project for Spring Boot</description>

	<parent>
		<groupId>org.springframework.boot</groupId>
		<artifactId>spring-boot-starter-parent</artifactId>
		<version>1.5.9.RELEASE</version>
		<relativePath/> <!-- lookup parent from repository -->
	</parent>

	<properties>
		<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
		<project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
		<java.version>1.7</java.version>
		<thymeleaf.version>3.0.2.RELEASE</thymeleaf.version>
 		<thymeleaf-layout-dialect.version>2.0.1</thymeleaf-layout-dialect.version>
	</properties>

	<dependencies>
		<!-- WebSocket相关包  -->
		<dependency>
			<groupId>javax.websocket</groupId>
			<artifactId>javax.websocket-api</artifactId>
			<version>1.0</version>
			<scope>provided</scope>
		</dependency>
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-websocket</artifactId>
		</dependency>

		<dependency>
			<groupId>org.springframework</groupId>
			<artifactId>spring-websocket</artifactId>
			<version>4.1.4.RELEASE</version>
		</dependency>
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-web</artifactId>
		</dependency>
		
		<dependency>
		    <groupId>org.springframework.boot</groupId>
		    <artifactId>spring-boot-starter-thymeleaf</artifactId>
		</dependency>
		
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-test</artifactId>
			<scope>test</scope>
		</dependency>
		<dependency>
			<groupId>com.vaadin.external.google</groupId>
			<artifactId>android-json</artifactId>
			<version>0.0.20131108.vaadin1</version>
			<scope>compile</scope>
		</dependency>

		<dependency>
		<groupId>net.sf.json-lib</groupId>
		<artifactId>json-lib</artifactId>
		<version>2.2.3</version>
		<classifier>jdk15</classifier>
		</dependency>

		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-jdbc</artifactId>
		</dependency>

		<dependency>
			<groupId>mysql</groupId>
			<artifactId>mysql-connector-java</artifactId>
		</dependency>
	</dependencies>

	<build>
		<plugins>
			<plugin>
				<groupId>org.springframework.boot</groupId>
				<artifactId>spring-boot-maven-plugin</artifactId>
			</plugin>
		</plugins>
	</build>


</project>

xml中webSocket的jar

<!-- WebSocket相关包  -->
		<dependency>
			<groupId>javax.websocket</groupId>
			<artifactId>javax.websocket-api</artifactId>
			<version>1.0</version>
			<scope>provided</scope>
		</dependency>

config开启WebSocket支持

package com.springboot.controller;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.socket.server.standard.ServerEndpointExporter;

/**
 * 开启WebSocket支持
 * @author zhengkai.blog.csdn.net
 */
@Configuration
public class WebSocketConfig {

    @Bean
    public ServerEndpointExporter serverEndpointExporter() {
        return new ServerEndpointExporter();
    }

}

websocket

package com.springboot.controller;

import javax.websocket.*;
import javax.websocket.server.PathParam;
import javax.websocket.server.ServerEndpoint;


import org.apache.commons.lang.StringUtils;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.stereotype.Component;


import java.io.IOException;
import java.util.Map;
import java.util.concurrent.ConcurrentHashMap;

@Component
@ServerEndpoint("/websocket/{userId}")
public class WebSocket {
	/** 静态变量，用来记录当前在线连接数。应该把它设计成线程安全的。 */
	private static int onlineCount = 0;
	
	
	private static Logger logger = LoggerFactory.getLogger(WebSocket.class);
	private static Map<String, WebSocket> clients = new ConcurrentHashMap<String, WebSocket>();
	private Session session;
	private String username;
	private String userId="";

	@OnOpen
	public void onOpen(@PathParam("userId") String userId, Session session)
			throws IOException {
		
		

		this.userId=userId;
		if (!clients.containsKey(userId)) {
			this.session = session;
			clients.put(userId, this);

		}else {
			
			clients.put(userId, this);
			// 加入set中
			logger.info("已存在当前用户的连接");

		}
		WebSocket.onlineCount++;
		try {
			 session.getBasicRemote().sendText("连接成功");
		//	sendMessageB("连接成功");
		} catch (IOException e) {
			//LogUtil.getLoger("cps.webSocket").error("用户:" + userId + ",网络异常!");
		}
		
		
	}

	
	
	@OnClose
	public void onClose() throws IOException {
		
		
		if (clients.containsKey(userId)) {
			clients.remove(userId);
			// 从set中删除
			WebSocket.onlineCount--;
		}

		System.out.println("用户退出:" + username + ",当前在线人数为:" + WebSocket.onlineCount);
		
	}

	@OnError
	public void onError(Session session, Throwable error) {
		logger.error(error.getMessage());
	}

	public String getUserId() {
		return userId;
	}

	public void setUserId(String userId) {
		this.userId = userId;
	}
	
	public Session getSession() {
		return session;
	}

	public void setSession(Session session) {
		this.session = session;
	}
	
	public static Map<String,WebSocket> getClients() {
		return clients;
	}

	
	public static void sendInfo(String message,
			@PathParam("userId") String userIdB) throws IOException {
		try {
			if (StringUtils.isNotBlank(userIdB) && clients.containsKey(userIdB)) {
			
					clients.get(userIdB).sendMessageB(message);
				
				
			} else {
			}
		} catch (IOException e) {
		}
	}
	
	/**
	 * 实现服务器主动推送
	 */
	public void sendMessageB(String message) throws IOException {
		// session.
		session.getBasicRemote().sendText(message);
	}
}

访问页面的controller

这里访问页面和模拟RabbitMQ接受消息方法

package com.springboot.controller;
import java.io.IOException;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;

@Controller
public class IndexController {


	@RequestMapping({"/init"})
	public String init(Model m, @RequestParam(required = true, defaultValue = "1") Integer id) {

		return "webSocket";
	}



    @RequestMapping({"/alarmFromWS"})
    public void alarmFromWS(){

        try {
            WebSocket.sendInfo("hello webSocket！","99");
        } catch (IOException e) {
        }
    }

}

实现效果

刚连接的时候

刚连接的时候的请求

当接到消息的时候

在这里插入图片描述

Ygv587

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
webSocket运用

web欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入欢迎使用Markdown编辑器你好！这是你第一次使用 Markdown编辑器所展示的欢迎页。如果你想学习如何使用Markdown编辑
复制链接

扫一扫