WebSocket实现多人实时聊天

最新推荐文章于 2025-03-06 20:17:16 发布

绿源2008

最新推荐文章于 2025-03-06 20:17:16 发布

阅读量5.8k

点赞数 1

分类专栏： websocket

本文链接：https://blog.youkuaiyun.com/chenkeqin_2012/article/details/53728331

版权

websocket 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一个基于WebSocket技术的简单聊天室应用实现。该应用通过HTML和JavaScript构建前端界面，并利用WebSocket进行实时通信。后端采用Java语言编写，实现了客户端连接管理、消息广播等功能。

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

chat.html：

<!DOCTYPE html>
<html>
<head>
   <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
   <title> 使用WebSocket通信 </title>
   <script type="text/javascript">
       // 创建WebSocket对象
       var webSocket = new WebSocket("ws://127.0.0.1:8888/WebSocket/websocket/chat");
       var sendMsg = function()
       {
           var inputElement = document.getElementById('msg');
           // 发送消息
           webSocket.send(inputElement.value);
           // 清空单行文本框
           inputElement.value = "";
       }
       var send = function(event)
       {
           if (event.keyCode == 13)
           {
               sendMsg();
           }
       };
       webSocket.onopen = function()
       {
           // 为onmessage事件绑定监听器，接收消息
           webSocket.onmessage= function(event)
           {
               var show = document.getElementById('show')
               // 接收、并显示消息
               show.innerHTML += event.data + "<br/>";
               show.scrollTop = show.scrollHeight;
           }
           document.getElementById('msg').onkeydown = send;
           document.getElementById('sendBn').onclick = sendMsg;
       };
       webSocket.onclose = function ()
       {
           document.getElementById('msg').onkeydown = null;
           document.getElementById('sendBn').onclick = null;
           Console.log('WebSocket已经被关闭。');
       };
   </script>
</head>
<body>
<div style="width:600px;height:240px;
   overflow-y:auto;border:1px solid #333;" id="show"></div>
<input type="text" size="80" id="msg" name="msg" placeholder="输入聊天内容"/>
<input type="button" value="发送" id="sendBn" name="sendBn"/>
</body>
</html>

package lee;

import java.io.IOException;
import java.util.Set;
import java.util.concurrent.CopyOnWriteArraySet;
import java.util.concurrent.atomic.AtomicInteger;

import javax.websocket.*;
import javax.websocket.server.*;

@ServerEndpoint(value = "/websocket/chat")
public class ChatEntpoint
{
   private static final String GUEST_PREFIX = "访客";
   private static final AtomicInteger connectionIds = new AtomicInteger(0);
   // 定义一个集合，用于保存所有接入的WebSocket客户端
   private static final Set<ChatEntpoint> clientSet =
       new CopyOnWriteArraySet<>();
   // 定义一个成员变量，记录WebSocket客户端的聊天昵称
   private final String nickname;
   // 定义一个成员变量，记录与WebSocket之间的会话
   private Session session;
   public ChatEntpoint()
   {
       nickname = GUEST_PREFIX + connectionIds.getAndIncrement();
   }
   // 当客户端连接进来时自动激发该方法
   @OnOpen
   public void start(Session session)
   {
       this.session = session;
       // 将WebSocket客户端会话添加到集合中
       clientSet.add(this);
       String message = String.format("【%s %s】"
           , nickname, "加入了聊天室！");
       // 发送消息
       broadcast(message);
   }
   // 当客户端断开连接时自动激发该方法
   @OnClose
   public void end()
   {
       clientSet.remove(this);
       String message = String.format("【%s %s】"
           , nickname, "离开了聊天室！");
       // 发送消息
       broadcast(message);
   }
   // 每当收到客户端消息时自动激发该方法
   @OnMessage
   public void incoming(String message)
   {
       String filteredMessage = String.format("%s: %s"
           , nickname, filter(message));
       // 发送消息
       broadcast(filteredMessage);
   }
   // 当客户端通信出现错误时，激发该方法
   @OnError
   public void onError(Throwable t) throws Throwable
   {
       System.out.println("WebSocket服务端错误 " + t);
   }
   // 实现广播消息的工具方法
   private static void broadcast(String msg)
   {
       // 遍历服务器关联的所有客户端
       for (ChatEntpoint client : clientSet)
       {
           try
           {
               synchronized (client)
               {
                   // 发送消息
                   client.session.getBasicRemote().sendText(msg);
               }
           }
           catch (IOException e)
           {
               System.out.println("聊天错误，向客户端 "
                   + client + " 发送消息出现错误。");
               clientSet.remove(client);
               try
               {
                   client.session.close();
               }
               catch (IOException e1){}
               String message = String.format("【%s %s】",
                   client.nickname, "已经被断开了连接。");
               broadcast(message);
           }
       }
   }
   // 定义一个工具方法，用于对字符串中的HTML字符标签进行转义
   private static String filter(String message)
   {
       if (message == null)
           return null;
       char content[] = new char[message.length()];
       message.getChars(0, message.length(), content, 0);
       StringBuilder result = new StringBuilder(content.length + 50);
       for (int i = 0; i < content.length; i++)
       {
           // 控制对尖括号等特殊字符进行转义
           switch (content[i])
           {
               case '<':
                   result.append("<");
                   break;
               case '>':
                   result.append(">");
                   break;
               case '&':
                   result.append("&");
                   break;
               case '"':
                   result.append(""");
                   break;
               default:
                   result.append(content[i]);
           }
       }
       return (result.toString());
   }
}