通过websocket实现聊天室的Demo

r囧r小猫 2022-05-24 04:55 265阅读 0赞

时下websocket非常的火热，它是基于TCP的一种新的网络协议。它实现了浏览器与服务器全双工(full-duplex)通信--允许服务器主动发送信息给客户端。下面通过一个小小的demo来看看它的应用：

1.创建一个类：WebSocketTest .java  
  
 package me.gacl.websocket;  
   
 import java.io.IOException;  
  import java.util.concurrent.CopyOnWriteArraySet;  
    
 import javax.websocket.\*;  
 import javax.websocket.server.ServerEndpoint;  
   
 /\*\*  
  \* @ServerEndpoint 注解是一个类层次的注解，它的功能主要是将目前的类定义成一个websocket服务器端,  
  \* 注解的值将被用于监听用户连接的终端访问URL地址,客户端可以通过这个URL来连接到WebSocket服务器端  
  \*/  
 @ServerEndpoint("/websocket")  
 public class WebSocketTest \{  
    //静态变量，用来记录当前在线连接数。应该把它设计成线程安全的。  
    private static int onlineCount = 0;  
  
  
    //concurrent包的线程安全Set，用来存放每个客户端对应的MyWebSocket对象。若要实现服务端与单一客户端通信的话，可以使用Map来存放，其中Key可以为用户标识  
     private static CopyOnWriteArraySet<WebSocketTest> webSocketSet = new CopyOnWriteArraySet<WebSocketTest>();  
   
     //与某个客户端的连接会话，需要通过它来给客户端发送数据  
     private Session session;   
    /\*\*  
      \* 连接建立成功调用的方法  
     \* @param session  可选的参数。session为与某个客户端的连接会话，需要通过它来给客户端发送数据     \*/  
    @OnOpen  
     public void onOpen(Session session)\{  
        this.session = session;  
       webSocketSet.add(this);     //加入set中  
        addOnlineCount();           //在线数加1  
        System.out.println("有新连接加入！当前在线人数为" + getOnlineCount());  
    \}   
    /\*\*  
     \* 连接关闭调用的方法  
      \*/  
     @OnClose  
    public void onClose()\{  
         webSocketSet.remove(this);  //从set中删除  
         subOnlineCount();           //在线数减1  
         System.out.println("有一连接关闭！当前在线人数为" + getOnlineCount());  
     \}  
   
    /\*\*  
     \* 收到客户端消息后调用的方法  
      \* @param message 客户端发送过来的消息  
     \* @param session 可选的参数  
      \*/  
    @OnMessage  
     public void onMessage(String message, Session session) \{  
         System.out.println("来自客户端的消息:" + message);  
         //群发消息  
         for(WebSocketTest item: webSocketSet)\{  
             try \{  
                 item.sendMessage(message);  
             \} catch (IOException e) \{  
                e.printStackTrace();  
                continue;  
             \}  
        \}  
     \}  
  
  
     /\*\*  
     \* 发生错误时调用  
      \* @param session      \* @param error  
     \*/  
     @OnError  
     public void onError(Session session, Throwable error)\{  
         System.out.println("发生错误");  
         error.printStackTrace();  
     \}  
   
     /\*\*  
      \* 这个方法与上面几个方法不一样。没有用注解，是根据自己需要添加的方法。  
      \* @param message  
      \* @throws IOException  
      \*/  
     public void sendMessage(String message) throws IOException\{  
         this.session.getBasicRemote().sendText(message);  
         //this.session.getAsyncRemote().sendText(message);  
     \}  
   
     public static synchronized int getOnlineCount() \{  
         return onlineCount;  
     \}  
   
     public static synchronized void addOnlineCount() \{  
         WebSocketTest.onlineCount++;  
     \}  
   
     public static synchronized void subOnlineCount() \{  
         WebSocketTest.onlineCount--;  
     \}

2.创建jsp页面

<%@ page language="java" pageEncoding="UTF-8" %>  
  <!DOCTYPE html>  
  <html>  
  <head>  
      <title>Java后端WebSocket的Tomcat实现</title>  
  </head>  
 <body>  
     Welcome<br/><input id="text" type="text"/>  
     <button οnclick="send()">发送消息</button>  
    <hr/>  
     <button οnclick="closeWebSocket()">关闭WebSocket连接</button>  
     <hr/>  
     <div id="message"></div>  
 </body>  
   
 <script type="text/javascript">  
     var websocket = null;  
     //判断当前浏览器是否支持WebSocket  
    if ('WebSocket' in window) \{  
         websocket = new WebSocket("ws://192.168.18.60:8088/websocket");  
    \}  
     else \{  
         alert('当前浏览器 Not support websocket')  
    \}  
   
     //连接发生错误的回调方法  
     websocket.onerror = function () \{  
         setMessageInnerHTML("WebSocket连接发生错误");  
     \};  
   
     //连接成功建立的回调方法  
    websocket.onopen = function () \{  
        setMessageInnerHTML("WebSocket连接成功");  
     \}  
   
     //接收到消息的回调方法  
     websocket.onmessage = function (event) \{  
        setMessageInnerHTML(event.data);  
     \}  
   
     //连接关闭的回调方法  
     websocket.onclose = function () \{  
         setMessageInnerHTML("WebSocket连接关闭");  
     \}  
  
  
     //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。  
     window.onbeforeunload = function () \{  
         closeWebSocket();  
     \}  
  
  
     //将消息显示在网页上  
     function setMessageInnerHTML(innerHTML) \{  
         document.getElementById('message').innerHTML += innerHTML + '<br/>';  
    \}  
   
     //关闭WebSocket连接  
     function closeWebSocket() \{  
         websocket.close();  
    \}  
  
  
     //发送消息  
     function send() \{  
         var message = document.getElementById('text').value;  
        websocket.send(message);  
     \}  
 </script>

</html>

3.web.xml没什么特别的地方

4.pom.xml文件

<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>WebsocketDemo</groupId>  
  <artifactId>WebsocketDemo</artifactId>  
  <version>0.0.1-SNAPSHOT</version>  
  <packaging>war</packaging>  
  <name/>  
  <description/>  
  <properties>  
    <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>  
  </properties>  
  <dependencies>  
    <dependency>  
      <groupId>javax.servlet</groupId>  
      <artifactId>jstl</artifactId>  
      <version>1.2</version>  
      <scope>provided</scope>  
    </dependency>  
    <dependency>  
      <groupId>javax.servlet.jsp</groupId>  
      <artifactId>jsp-api</artifactId>  
      <version>2.1</version>  
      <scope>provided</scope>  
    </dependency>  
    <dependency>  
      <groupId>org.glassfish</groupId>  
      <artifactId>javax.annotation</artifactId>  
      <version>3.0.1</version>  
    </dependency>  
    <dependency>  
      <groupId>org.glassfish</groupId>  
      <artifactId>javax.ejb</artifactId>  
      <version>3.0.1</version>  
    </dependency>  
    <dependency>  
      <groupId>org.jboss.weld</groupId>  
      <artifactId>weld-osgi-bundle</artifactId>  
      <version>1.0.1-SP3</version>  
    </dependency>  
    <dependency>  
      <groupId>org.glassfish</groupId>  
      <artifactId>javax.servlet</artifactId>  
      <version>3.0.1</version>  
      <scope>provided</scope>  
    </dependency>  
      
    <dependency>  
       <groupId>javax</groupId>  
         <artifactId>javaee-api</artifactId>      
           <version>7.0</version>  
             
         <scope>provided</scope>  
 </dependency>  
  </dependencies>  
  <build>  
    <plugins>  
      <plugin>  
        <artifactId>maven-war-plugin</artifactId>  
      </plugin>  
  
<plugin>  
<groupId>org.apache.tomcat.maven</groupId>  
<artifactId>tomcat7-maven-plugin</artifactId>  
<configuration>  
<port>8088</port>  
<path>/</path>  
<url>http://192.168.18.60:8088</url>  
<username>tomcat</username>  
<password>tomcat</password>  
</configuration>  
</plugin>  
      <plugin>  
        <artifactId>maven-compiler-plugin</artifactId>  
        <configuration>  
          <source>1.6</source>  
          <target>1.6</target>  
        </configuration>  
      </plugin>  
    </plugins>  
  </build>

</project>

最后运行的结果：

![20180521105857287][]

[20180521105857287]: /images/20220524/e464ce5ef65a4ade96e28f98d95eca9e.png