使用webSocket实现简单的通信（一）

最新推荐文章于 2025-07-02 23:45:35 发布

25k董

最新推荐文章于 2025-07-02 23:45:35 发布

阅读量743

点赞数

CC 4.0 BY-SA版权

分类专栏： webSocket

本文链接：https://blog.youkuaiyun.com/Dbbbbbbbbb/article/details/83902479

webSocket 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了如何使用WebSocket实现简单的通信，分为三个步骤：首先，编写了Java后端文件；接着，创建了前端HTML和JavaScript文件；最后，补充了必要的WebSocket相关jar包，确保通信功能的正常运行。

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

步骤一：编写java文件

package com.qf.websocket;


import com.google.gson.Gson;

import javax.websocket.*;
import javax.websocket.server.PathParam;
import javax.websocket.server.ServerEndpoint;
import java.io.IOException;
import java.util.ArrayList;
import java.util.List;
import java.util.Map;
import java.util.concurrent.ConcurrentHashMap;

@ServerEndpoint("/websocket/{name}")
public class controller {

    private String name;
    private Session session;

     private static Map<String,Session> allClients =  new ConcurrentHashMap<String,Session>();
     private static Map<String,List<Session>> listClients = new ConcurrentHashMap<String, List<Session>>();
     private List<Session> list = new ArrayList<Session>();
    @OnOpen
     public void onOpen(@PathParam("name") String name, Session session){
        System.out.println("链接建立了");
        this.name = name;
        this.session = session;
//        list.add(session);
        allClients.put(name,session);
//        listClients.put("hunziqun",list);
    }

    @OnMessage
    public void onMessage(Session session ,String message){

        System.out.println("收到消息了==============>" + message);
        Map<String,String> map = new Gson().fromJson(message, Map.class);
        String to = map.get("to");
        String content = map.get("content");
        if(to!=null){
            Session session1 = allClients.get(to);
            if(session1 !=null && session1.isOpen()){
                session1.getAsyncRemote().sendText("来自 "+name+" 的消息是："+content);
            }else {
                session.getAsyncRemote().sendText("对方不在线");
            }

        }

    }

    @OnError
    public void onError(Session session,Throwable t){
            try {
                if(session.isOpen()) {
                    session.close();
                }
                allClients.remove(name);
            } catch (IOException e) {
                e.printStackTrace();
            }
    }

    @OnClose
    public void onClose(Session session){
        allClients.remove(name);
        System.out.println("链接关闭了");
    }




}

步骤二：编写前端文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script type="text/javascript">

        var websocket = null;

        function abc() {
            var name = document.getElementById("name").value;
            if("WebSocket" in window){
                websocket = new WebSocket("ws://"+document.location.host+"/websocket/"+name);

                websocket.onopen = function () {
                    setMessage("链接成功");
                }

                websocket.onmessage = function (message) {
                    setMessage(message.data);
                }

                websocket.onerror = function (){
                    setMessage("链接出错");
                }

                websocket.onclose = function () {
                    setMessage("关闭链接");
                }
            }else {
                alert("浏览器太垃圾了");
            }
        }

        function setMessage(data) {
            var message = document.getElementById("xianshi");
            message.innerHTML = data;
        }

        function sendMessage() {
            var to = document.getElementById("to").value;
            var mes = document.getElementById("content").value;
            if(websocket!=null){
                var message = '{"to":"'+to+'","content":"'+mes+'"}';
                websocket.send(message);
            }

        }

        function  close() {
            if(websocket!=null){
                websocket.clone();
            }
        }

        window.onbeforeunload = function () {
            close();
        }
    </script>

</head>
<body>
   用户名 <input id="name"> <input type="button" onclick="abc()" value="链接"><br>
   接受者 <input id="to"><br>
    发送内容<input id="content"> <input type="button" onclick="sendMessage()" value="发送"><br>

<br>
   <br>
   <br>
   <br>
   <br>
   <br>
   <br>
   <br>
   <span id="xianshi"></span>>
</body>
</html>

步骤三：补上jar包

<?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.qf</groupId>
    <artifactId>webSocket_two</artifactId>
    <packaging>pom</packaging>
    <version>1.0</version>
    <modules>
        <module>webSocketBasic</module>
    </modules>


</project>