Websocket服务监听收发消息

2024-03-17 00:06:02
开发
21

1.pom依赖坐标

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

2.项目配置端口和项目包名

application.properties

server.port=8088
//路径规范：为应用的所有servlet提供一个统一的前缀，使URL结构更加清晰和一致
server.servlet.context-path=/rxtxcommon

2.创建处理器

import com.fazecast.jSerialComm.SerialPort;
import com.groupname.rxtxcommon.service.SerialPortService;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Component;
import org.springframework.web.socket.CloseStatus;
import org.springframework.web.socket.TextMessage;
import org.springframework.web.socket.WebSocketSession;
import org.springframework.web.socket.handler.TextWebSocketHandler;
import java.util.List;
import java.util.Map;


@Component
public class WebSocketHandler extends TextWebSocketHandler {

    private static Logger log = LoggerFactory.getLogger(WebSocketHandler.class);
    //和客户端建立连接
    @Override
    public void afterConnectionEstablished(WebSocketSession session) {
        log.info("和客户端建立连接"+session.getId());
	    //初始建立连接业务逻辑处理
		。。。。。。
		。。。。。。  
    }

    //和客户端断开连接
    @Override
    public void afterConnectionClosed(WebSocketSession session, CloseStatus status) throws Exception {
        log.info("和客户端断开连接");
       //断开连接业务逻辑处理
		。。。。。。
		。。。。。。
        super.afterConnectionClosed(session, status);	    
    }

    // 获取客户端发来的消息并响应消息
    @Override
    protected void handleTextMessage(WebSocketSession session, TextMessage message) throws Exception {
        String receObjStr = message.getPayload();
        log.info("sessionID==="+session.getId());
		//接收客户端消息进行业务逻辑处理
		。。。。。。
		。。。。。。        
        // 发送消息给客户端
        session.sendMessage(new TextMessage("字符串"));
    }
	
	//异常处理
	@Override
    public void handleTransportError(WebSocketSession session, Throwable exception) throws Exception {
        session.close(CloseStatus.SERVER_ERROR);
        log.error("连接异常", exception);
    }
}

3.注册处理器

@Configuration
@EnableWebSocket
public class WebSocketServerConfigure implements WebSocketConfigurer {

    @Autowired
    private WebSocketHandler webSocketHandler;

    @Override
    public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {
    	//前端用websocket建立连接
        registry.addHandler(webSocketHandler, "/websocket");
            //这是另一种方式，但是前端用SockJS建立连接
//        registry.addHandler(webSocketHandler, "/websocket").withSockJS();
    }
}

4.前端页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>WebSocket客户端</title>
    <script src="https://cdn.bootcss.com/sockjs-client/0.3.4/sockjs.min.js"></script>
    <link href="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<style>
    .jumbotron {
        width: 100%;
    }

    #text {
        height: 3rem;
        font-size: 1rem;
        line-height: 3rem;
        margin: 1rem;
    }

    .btn {
        margin-right: 5px;
    }

    #connect {
        margin-left: 1rem;
    }

    #log {
        margin: 1rem 0 0 1rem;
    }

</style>
<div class="container">
    <div class="row">
        <div class="jumbotron">
            <input type="text" placeholder="请输入你想传输的内容" id="text" class="col-lg-12"/>
            <input type="button" value="连接" class="btn btn-info" id="connect" onclick="connect()"/>
            <input type="button" value="发送" class="btn btn-success" id="sent" disabled="disabled" onclick="sent()"/>
            <input type="button" value="断开" class="btn btn-danger" id="disconnect" disabled="disabled"
                   onclick="disconnect()"/>
            <div id="log">
                <p>聊天记录:</p>
            </div>
            <input type="button" value="" class="btn btn-success" id="openCom" disabled="disabled"
                   onclick="getCommSer()"/>
        </div>
    </div>
</div>
<script type="text/javascript">
    let text = document.querySelector('#text');
    let connectBtn = document.querySelector("#connect");
    let sentBtn = document.querySelector("#sent");
    let disconnectBtn = document.querySelector("#disconnect");
    let logDiv = document.querySelector("#log");
    let ws = null;
    
    function connect(operNum) {
        debugger
        //rxtxcommon是springboot项目的包名
		//application.properties
		//server.port=8088
		//server.servlet.context-path=/rxtxcommon        
		
        ws = new WebSocket("ws://localhost:8088/rxtxcommon/websocket")       
        ws.onopen = function () {
        //如果与后端websocket成功建立连接那么onopen 函数会触发
            setConnected(true);
            log('和服务端连接成功！');
        };
        
        // 监听服务端返回的消息
        ws.onmessage = function(event) {
            console.log("测试接收服务器信息"+event)
            log('收到服务端消息：' + event.data);
        };
    }

    function sent() {
        if (ws != null) {
            ws.send(text.value);
            log('客户端说：' + text.value);
        } else {
            log('请先建立连接！')
        }
    }

    function disconnect() {
        if (ws != null) {
            ws.close();
            ws = null;
        }
        setConnected(false);
    }

    function log(value) {
        let content = document.createElement('p');
        content.innerHTML = value;
        logDiv.appendChild(content);
        text.value = '';
    }

    function setConnected(connected) {
        connectBtn.disabled = connected;
        disconnectBtn.disabled = !connected;
        sentBtn.disabled = !connected;
    }

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

原文地址:https://blog.csdn.net/beiback/article/details/136690486 本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：https://www.suanlizi.com/kf/1769032381861335040.html 如若内容造成侵权/违法违规/事实不符，请联系《酸梨子》网邮箱：1419361763@qq.com进行投诉反馈，一经查实，立即删除！

阅读全部

Websocket服务监听收发消息

目录

1.pom依赖坐标

2.项目配置端口和项目包名

2.创建处理器

3.注册处理器

4.前端页面

相关推荐

最近更新

热门阅读