webSocket开发入门

bst@微胖子

已于 2023-04-24 15:04:34 修改

阅读量1.1k

点赞数 1

分类专栏： WebService + WebSocket 文章标签： websocket 网络 http

于 2021-12-17 18:39:05 首次发布

本文链接：https://blog.csdn.net/zouyang920/article/details/122002727

版权

WebService + WebSocket 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

websocket的优点

双向通信、事件驱动、异步、使用ws或wss协议的客户端能够真正实现意义上的推送功能（http协议之只能从客户端向服务端发数据包，websocket是http协议的扩充，建立连接时也符合http握手流程）。

开发流程

在这里插入图片描述

package com.hst.ces.test;

import org.slf4j.Logger;
import org.slf4j.LoggerFactory;

import javax.websocket.*;
import javax.websocket.server.PathParam;
import javax.websocket.server.ServerEndpoint;
import java.io.IOException;

/**
 * @author ：zy
 * @date ：Created in 2021/12/17 17:48
 * @description：描述
 * @version: 1.0
 */
@ServerEndpoint(value="/websocketTest/{userId}")
public class TestWebSocket {
    private Logger logger = LoggerFactory.getLogger(TestWebSocket.class);

    private static String userId;

    //连接时执行
    @OnOpen
    public void onOpen(@PathParam("userId") String userId, Session session) throws IOException {
        this.userId = userId;
        logger.debug("新连接：{}",userId);
        System.out.println("新连接：{}"+"------"+userId);
    }

    //关闭时执行
    @OnClose
    public void onClose(){
        logger.debug("连接：{} 关闭",this.userId);
    }

    //收到消息时执行
    @OnMessage
    public void onMessage(String message, Session session) throws IOException {
        logger.debug("收到用户{}的消息{}",this.userId,message);
        System.out.println("收到用户{}的消息{}"+"------"+this.userId+"---------"+message);
        session.getBasicRemote().sendText("收到 "+this.userId+" 的消息 "); //回复用户
    }

    //连接错误时执行
    @OnError
    public void onError(Session session, Throwable error){
        logger.debug("用户id为：{}的连接发送错误",this.userId);
        error.printStackTrace();
    }
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
websocket Demo---- user000 <br />
<input id="text" type="text" />
<button onclick="send()"> Send </button>
<button   onclick="closeWebSocket()"> Close </button>
<div id="message">   </div>

<script type="text/javascript">
    //判断当前浏览器是否支持WebSocket
    if('WebSocket' in window){
        websocket = new WebSocket("ws://localhost:8085/fmapi/websocketTest/user000");
        console.log("link success")
    }else{
        alert('Not support websocket')
    }

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

    //连接成功建立的回调方法
    websocket.onopen = function(event){
        setMessageInnerHTML("open");
    }
    console.log("-----")
    //接收到消息的回调方法
    websocket.onmessage = function(event){
        setMessageInnerHTML(event.data);
    }

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

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

    //将消息显示在网页上
    function setMessageInnerHTML(innerHTML){
        document.getElementById('message').innerHTML += innerHTML + '<br/>';
    }

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

    //发送消息
    function send(){
        var message = document.getElementById('text').value;
        websocket.send(message);
    }
</script>

</body>
</html>

结果

在这里插入图片描述

刷新页面建立连接走后台open方法，点击send发送消息走后台onmessage方法。
在这里插入图片描述

后台打印了数据，乱码自行解决，idea设置utf-8即可。

参考链接

bst@微胖子

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
webSocket开发入门

websocket的优点双向通信、事件驱动、异步、使用ws或wss协议的客户端能够真正实现意义上的推送功能（http协议之只能从客户端向服务端发数据包，websocket是http协议的扩充，建立连接时也符合http握手流程）。开发流程package com.hst.ces.test;import org.slf4j.Logger;import org.slf4j.LoggerFactory;import javax.websocket.*;import javax.websocket.
复制链接

扫一扫