java开发-简单websocket

最新推荐文章于 2024-05-31 18:08:24 发布

Ni_Shun

最新推荐文章于 2024-05-31 18:08:24 发布

阅读量455

点赞数 10

分类专栏： java开发文章标签： java websocket 开发语言

本文链接：https://blog.csdn.net/Ni_Shun/article/details/135263541

版权

java开发专栏收录该内容

2 篇文章 0 订阅

订阅专栏

一、后端代码：简单版本

1、spring-boot项目，依赖

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

2、配置：

配置文件WebSocketConfig ，使用该服务，端口为服务端口作为服务器。
最简单的配置（复杂的不写）。

package com.aleip.waybilladapter.push;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.context.annotation.Configuration;
import org.springframework.messaging.simp.config.ChannelRegistration;
import org.springframework.messaging.simp.config.MessageBrokerRegistry;
import org.springframework.web.socket.config.annotation.EnableWebSocketMessageBroker;
import org.springframework.web.socket.config.annotation.StompEndpointRegistry;
import org.springframework.web.socket.config.annotation.WebSocketMessageBrokerConfigurer;


@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfig implements WebSocketMessageBrokerConfigurer {

	@Autowired
	PresenceChannelInterceptor presenceChannelInterceptor;

	@Override
	public void registerStompEndpoints(StompEndpointRegistry registry) {
		//设置 访问地址尾
		registry.addEndpoint("/endpointWisely").setAllowedOrigins("*").withSockJS();
	}

	@Override
	public void configureMessageBroker(MessageBrokerRegistry registry) {
		registry.enableSimpleBroker("/topic");
	}

	@Override
	public void configureClientInboundChannel(ChannelRegistration registration) {
		registration.interceptors(presenceChannelInterceptor);
	}

	@Override
	public void configureClientOutboundChannel(ChannelRegistration registration) {

		registration.interceptors(presenceChannelInterceptor);
	}

}

package com.aleip.waybilladapter.push;

import org.springframework.messaging.Message;
import org.springframework.messaging.MessageChannel;
import org.springframework.messaging.support.ChannelInterceptor;
import org.springframework.stereotype.Component;

@Component
public class PresenceChannelInterceptor implements ChannelInterceptor {


    @Override
    public void postSend(Message<?> message, MessageChannel channel, boolean sent) {

    }

}

3、信息发送

IPushService （PushMessageEntity自定义）

package com.aleip.common.service;

import com.aleip.common.entry.push.PushMessageEntity;

import java.util.List;


public interface IPushService {
	 void push(List<PushMessageEntity> messages);

}

WebSocketPushServiceImpl

package com.aleip.common.service.impl;


import com.aleip.common.entry.push.PushMessageEntity;
import com.aleip.common.service.IPushService;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.messaging.simp.SimpMessagingTemplate;
import org.springframework.stereotype.Service;
import org.springframework.util.CollectionUtils;

import java.time.LocalDateTime;
import java.util.List;


@Service
public class WebSocketPushServiceImpl implements IPushService {

    @Autowired
    private SimpMessagingTemplate simpMessagingTemplate;


	@Override
	public void push(List<PushMessageEntity> messages) {

		if(!CollectionUtils.isEmpty(messages)) {
			messages.forEach(message -> {
				simpMessagingTemplate.convertAndSend("/topic/",message);
			});
		}
	}
}

二、前端测试

1、在线测试网址

http://www.jsons.cn/websocket/

2、前端代码


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>message push test</title>

    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery.form/4.2.2/jquery.form.min.js"></script>
    <script type="text/javascript" src="https://cdn.bootcss.com/sockjs-client/1.1.4/sockjs.min.js"></script>
    <script type="text/javascript" src="https://cdn.bootcss.com/stomp.js/2.3.3/stomp.min.js"></script>
    <script type="text/javascript">
        //
        function setConnected(connected) {
            document.getElementById('connect').disabled = connected;
            document.getElementById('disconnect').disabled = !connected;
            document.getElementById('conversationDiv').style.display = connected ? '' : 'none';
            document.getElementById('response').innerHTML = '';
        }

        var stompClient = null, userId = null, desurl = null;
        function connect() {
        
            desurl = '/topic/';
           
			const myurl='http://173.101.2.4:8013/endpointWisely';
	
			var socket = new SockJS(myurl, null, {timeout: 50000})
            stompClient = Stomp.over(socket);
		
			// 心跳接收频率
			stompClient.heartbeat.incoming = 20000;
			// 心跳发送频率
			stompClient.heartbeat.outgoing = 20000;
			// 心跳接收频率
			
		
            stompClient.connect({'subscribeUrl':desurl,'userId':'lixiong','heart-beat':'30000,30000'}, function(frame) {
                setConnected(true);
                console.log('Connected: ' + frame);
                //订阅广播消息
                stompClient.subscribe(desurl, function(greeting){
                    showGreeting(greeting.body);
                });
            });
			stompClient.onerror = function (e) {
			  console.log('WebSocket发生错误: ' + e.code)
			  console.log(e)
			}
        }

        function disconnect() {
            if (stompClient != null) {
                stompClient.disconnect(headers={'userId':userId,'subscribeUrl':desurl});
                setConnected(false);
                console.log("Disconnected");
            }
        }

        function showGreeting(message) {
            var response = document.getElementById('response');
            var p = document.createElement('p');
            p.style.wordWrap = 'break-word';
            p.appendChild(document.createTextNode(message));
            response.appendChild(p);
        }

        //
        function saveReport() {
            //event.preventDefault();
            $("form").ajaxSubmit(function(message) {
                console.log(message);
            });
            return false;
        }
    </script>
</head>
<body class="easyui-layout">
<div>
    <div>
        <h3>websocket连接服务端</h3>
        <label>请输入用户ID：</label><input type="text" id="uid"  style="width: 150px;"/>
        <button id="connect" onclick="connect();">Connect</button>
        <button id="disconnect" disabled="disabled" onclick="disconnect();">Disconnect</button>
        <hr>
        <form method="post" onsubmit="return saveReport();" action="http://localhost:8971/endpointWisely">
<!--            <h3>模拟推送</h3>-->
<!--            <label>json格式数据：</label><input type="text" name="json" style="width: 800px;"/>-->
<!--            <input type="submit" />-->
        </form>
        <hr>
    </div>
    <div id="conversationDiv" style="display: none;">
        <h3>websocket接收数据</h3>
        <p id="response" style="border: black;width: 800px;border-style: dashed; min-height: 20px;"></p>
    </div>
</div>
</body>
</html>