websocket简单通信_简单的websocket通信-优快云博客

本文链接：https://blog.youkuaiyun.com/liurong_scut/article/details/82974295

本文详细介绍如何使用WebSocket实现客户端与服务器之间的全双工通信。通过IDEA和Maven搭建项目，引入必要的依赖，前端使用JavaScript创建WebSocket连接，后端采用Java编写服务器端点。文章演示了双浏览器同时连接的测试场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用websocket可以实现客户端到服务器的全双工通信，底层还是tcp协议。原理概念请百度。、。

首先我们使用idea搭建一个简单的web项目，使用maven管理项目的依赖。为项目添加spring springmvn支持能力，添加pom依赖如下：

  <dependency>
      <groupId>javax.websocket</groupId>
      <artifactId>javax.websocket-api</artifactId>
      <version>1.0</version>
    </dependency>

接下来我们编写idea自动生成的indes.jsp页面如下：注意这里的jsp文件第一行指定了文件的编码，否则很可能会出现乱码。

<%@page pageEncoding="utf-8" language="java" %>
<html>
<head>

    <title>web socket</title>
    <script type="text/javascript">
        var webSocket;
        if("WebSocket" in window){
            webSocket=new WebSocket("ws://localhost:80/websocket")

        }

        webSocket.onopen=function(){
            setMessage("websocket开启连接成功");
        }
        webSocket.onerror=function (ev) {
            setMessage("websocket 错误");
        }
        webSocket.onmessage=function (ev) {
            setMessage(ev.data);
        }
        webSocket.onclose=function (ev) {
            setMessage("websocket关闭");
        }

        window.onunload=function (ev) {
            closeWebSocket();
        }
        function closeWebSocket(){
            webSocket.close()
        }

        function setMessage(message){
            document.getElementById("div").innerHTML+=message+"<br/>";
        }

        function sendMessage(){
            var content=document.getElementById("message").value;
            webSocket.send(content);
        }
    </script>
</head>
<body>
<h2>webSocket test</h2>
input date:<input type="text" name="message" id="message"/>
<input type="button" name="button" onclick="sendMessage();" value="send"/>
<input type="button" name="button"  onclick="closeWebSocket();" value="close"/>
<div id="div"></div>
</body>
</html>

以上的前端编写完成了，这里设置了几个按钮，并且给按钮绑定了事件，在script脚本之中，构建了websocket对象，并且给对象绑定了事件。

接下来就是后台部分编写了。

import javax.websocket.OnClose;
import javax.websocket.OnMessage;
import javax.websocket.OnOpen;
import javax.websocket.Session;
import javax.websocket.server.ServerEndpoint;
import java.io.IOException;
import java.util.concurrent.CopyOnWriteArraySet;

@ServerEndpoint("/websocket")
public class webSocketDemo {

    private static  int onlineCount=1;
    private  Session session;

    private static final CopyOnWriteArraySet<webSocketDemo> set=new CopyOnWriteArraySet<>();

    @OnOpen
    public void open(Session session){
        this.session=session;
        System.out.println("===========>打开websocket");
        set.add(this);
        add();
    }

    @OnClose
    public void close(){
        set.remove(this);
        del();
        System.out.println("===>关闭websocket=======");
    }

    @OnMessage
    public void onMessage(String message,Session session){
        for(webSocketDemo item:set){
            try {
                item.sendMessage("echo"+message);
                System.out.println("发送消息:+"+message);
            }catch (Exception e){
                e.printStackTrace();
                continue;
            }
        }
    }
    public   void sendMessage(String message) throws IOException{
        this.session.getBasicRemote().sendText(message);
    }
    public static synchronized void add(){
        webSocketDemo.onlineCount++;
    }
    public static synchronized void del(){
        webSocketDemo.onlineCount--;
    }
    
}

这里采用的一个java并发包中的CopyOnWriteArraySet来保存每个websocket客户端。并且给websocket客户端关闭和打开绑定了各种事件。

这里我们打开两个浏览器来测试结果，如下图：