websocket实现聊天室应用，包括文字和图片上传

傷城~ 2021-09-15 02:34 394阅读 0赞

谈websocket之前，我们可以先复习一下web通信的一些概念。

## 推(PUSH)和拉(PULL)： ##

推和拉是Web通信的两种方式，从定义上来说它们最主要的区别在于方向性，推是服务器主动向客户端推送消息，拉则是客户端主动发请求向服务器获取数据。

优缺点及适用场景：

1、拉模式是最常用、最成熟的一种方式，它依托了非常成熟的HTTP协议，有大量的工具类和库可以使用，请求/响应模式几乎每个程序员都知道，出现问题也容易找到相应的解决方案。

2、拉模式的限制特别少，任何一款浏览器，只要能称为浏览器的，不管多古老都支持拉，推的话像websocket是H5才支持，IE9都不支持，不仅是客户端，服务端也是有限制的，要较新的服务器才支持websocket，如Tomcat 7.0.5，WebLogic 12c ，IIS 7.0...以上的版本才“真正”支持websocket。

3、对于一般请求，拉模式占用的资源也少，比如请求个列表或者明细，服务器处理完并返回数据后，连接就断开了，简洁明了不占用连接资源。所以拉适合大多数一般的请求场景，但对于后台数据变化需要实时更新的，比如股票市场、网页游戏和聊天实等程序，拉就不适合了。

## 长轮询和长连接 ##

在websocket出现之前，要实现服务器推，有两种方式，分别是长轮询和长连接。

### 长轮询： ###

轮询(Polling)：客户端(浏览器)设一个定时器或死循环不停地向服务端发送查询请求，轮询的结果可能是服务端有更新就返回新的数据，也可能时服务端根本就没更新，得到一个空的信息。但是不管结果如何，客户端在下一个时间节点都会进行新的一轮请求。

短轮询： 服务端对每次请求立即返回结果。

长轮询： 长轮询是对短轮询的改善，服务端接收到请求后先查看数据，如果有更新立即返回，如果没有则把请求挂起一段时间，在这段时间内有更新就返回，如果一直没更新直到超时，服务器会主动向客户端发送本次轮询无新信息的正常响应，并断开连接，这种响应也被称之为“心跳”。再有就是如果网络故障导致轮询的意外中断，此时浏览器将收到错误信息。

由上可知，对于客户端来说，不管是长轮询还是短轮询，客户端的动作都是一样的，就是死循环不停的去请求。即一种轮询方式是否为长轮询，是根据服务端的处理方式来决定的，与客户端没有关系。

### 长连接： ###

HTTP长连接：HTTP分为长连接和短连接，它们外在表现形式的区别就是请求/响应头中是否有Connection:keep-alive。内在的区别就是TCP连接是否会被复用，即多个HTTP请求是否可以复用同一个TCP连接，可以即长连接，HTTP长连接可以节省了很多TCP连接建立和断开的消耗。比如请求一个网页，现在的网页大多不仅仅只有HTML，一般还包含了CSS、JS、图片等一系列资源，如果用短连接就需要建立几个甚至几十个TCP连接，长连接复用一个就好了，HTTP1.1以后默认都是长连接了。

实现服务器推的长连接：基于iframe流的方式，其实现原理主要是在页面隐藏一个iframe(display:none)，前台设定iframe的src属性为对一个长连接的请求，服务器返回对页面函数的调用。使用iframe流方式的话浏览器会一直转圈（进度条一直没完）。这种iframe流的长连接实现服务器推的模式比较少见，与ajax长轮询稍有区别。一般ajax轮询使用XMLHttpRequest 对象发送请求，在 XMLHttpRequest 的 readystate 为 4（即数据传输结束）时使用回调函数对返回的数据进行处理。而iframe服务端返回的是JS脚本，客户端得到该脚本后就自动执行。简单的说，ajax返回的是数据而后再使用回调函数处理该数据，iframe返回的是JS脚本(脚本内可能包含数据)，浏览器自动执行。

如：

iframe流实现方式：

服务端代码：

\[java\]  [view plain][]  [copy][view plain]

1.  while(true)\{  
2.     while(!condition)\{<span style="font-family:Arial, Helvetica, sans-serif;">//模拟阻塞，等待条件成熟，推送信息</span>  
3.  <span style="white-space:pre;"> </span>Thread.sleep(1000);<span style="font-family:Arial, Helvetica, sans-serif;">   </span>  
4.     \}  
5.     num++;  
6.     PrintWriter pw = resp.getWriter();    
7.     pw.println("<script>parent.changeNumber("\+num+")</script>");  
8.     pw.flush();   
9.  \}

可以看到，服务端使用的是PrintWriter，等于说是将

\[java\]  [view plain][]  [copy][view plain]

1.  <script>parent.changeNumber("+num+")</script>

写在浏览器里面

客户端代码：

\[html\]  [view plain][]  [copy][view plain]

1.  <iframe id="polling" src="IframeCometServlet" style="display:none;"></iframe>   
2.  function changeNumber(num) \{  //服务端返回的字符串调用的方法  
3.      document.getElementById("number").innerHTML = num;    
4.  \}

注意changeNumber(num)这个函数，与服务端返回的一致(服务端返回的为什么要带一个parent.前缀？因为是iframe接收啊，而changeNumber是定义在外面的)。

ajax长轮询方式：

服务端代码：

\[java\]  [view plain][]  [copy][view plain]

1.  @RequestMapping(value = "/list")  
2.     public String list(HttpServletRequest request) \{  
3.         while(condition)\{ //等待条件成熟  
4.            //do something  
5.     break;  
6.  \}  
7.  return "something";  
8.     \}

客户端代码（该代码要在循环里面才能达到轮询效果）：

\[html\]  [view plain][]  [copy][view plain]

1.  $.ajax(\{  
2.          type: "POST",  
3.          url: "/web/goods/list",    
4.          data: JSON.stringify(\{data:'hello'\}),  
5.          contentType: "application/json; charset=utf\-8",  
6.          dataType: "json",  
7.          success: function (result) \{  
8.            //do something  
9.          \}  
10.   \});

![Center][] ![Center 1][]

通过长轮询和长连接可以看到，它们都并不是真正的服务器推，只是变相的拉而已，这是对HTTP体系的妥协。

由此引出真正的服务器推技术：WebSocket

## WebSocket ##

### WebSocket是什么？ ###

WebSocket和HTTP一样，是基于TCP的应用层通信协议，通过维持一条持久的连接以实现浏览器与服务器全双工通信，是随着H5一起出来的。

WebSocket和HTTP有什么关系么？

Websocket其实是一个新协议，除了最开始借用了HTTP来完成握手，后面跟HTTP基本没有关系了。

![Center 2][]

传统的HTTP要不断的建立、关闭连接(这里的关闭并不是说关闭TCP连接，而是关闭HTTP连接)，而且由于HTTP是无状态性的，每次都要重新传输identity info（鉴别信息），来告诉服务端你是谁，当然，一般只是带个JSESSIONID之类的，服务端通过这个就知道你的其他信息了。WebSocket 是类似 Socket 的 TCP 长连接的通讯模式，一旦 WebSocket 连接建立后，后续数据都以帧序列的形式传输。在断掉 WebSocket 连接前，都不需要客户端和服务端重新发起连接请求，即只需一次HTTP握手，整个通讯过程是建立在一次连接/状态中，也就避免了HTTP的无状态性。

### WebSocket握手 ###

WebSocket的握手过程就是建立WebSocket连接的过程，握手是借用了HTTP的。

总体步骤大致如下：

Step 1: 建立TCP连接（这一步是一切的基础，HTTP也一样）。

Step 2: 浏览器借助一个WebSocket 客户端对象，连接类似 ws://yourdomain:port/path或wss://yourdomain:port/path的URL，WebSocket 客户端对象会自动解析并识别为要建立WebSocket 连接，从而发送HTTP Get 请求，并为请求自动添加一些供WebSocket使用的HTTP Headers字段。注意，连接头变成了ws，而不是一般的http，这是协议的意思，ws代表websocket。

Step 3: Server收到HTTP请求后，会把Step 1的TCP连接的应用层协议从HTTP转变为WebSocket。至此，HTTP部分就退出舞台了，WebSocket开始接管一切。

### WebSocket握手报文（HTTP）分析： ###

请求

\[html\]  [view plain][]  [copy][view plain]

1.  GET /chat HTTP/1.1  
2.  Host: 127.0.0.1:8080  
3.  Upgrade: websocket  
4.  Connection: Upgrade  
5.  Sec-WebSocket-Key: JkTukkPc4Rha+nIkbYhEkQ==  
6.  Sec-WebSocket-Version: 13  
7.  Origin: http://localhost:8080

响应

\[html\]  [view plain][]  [copy][view plain]

1.  HTTP/1.1 101 Switching Protocols  
2.  Upgrade: websocket  
3.  Connection: Upgrade  
4.  Sec-WebSocket-Accept: RD69G0BS8RPH/GbY6rBsZI75pjk=  
5.  Server:Apache-Coyote/1.1  
6.  Date:Sat, 17 Jun 2017 15:35:41 GMT

以上报文和一般的HTTP有很多不同的地方：

1、请求和响应都有Upgrade: websocket和Connection: Upgrade，这是协议转换的意思，也就是请求时告诉服务器，本次连接需要的是websocket通信协议，而不是一般的HTTP，响应也带有该响应头表示转换成功。

一般响应成功的响应头是 HTTP/1.1 200 OK、HTTP/1.1 404 NOT FOUND等，此处是HTTP/1.1 101 Switching Protocols，同样101也是HTTP的一种响应状态，表示协议转换成功。

2、Sec-WebSocket-Key: JkTukkPc4Rha+nIkbYhEkQ==和Sec-WebSocket-Accept: RD69G0BS8RPH/GbY6rBsZI75pjk=

这是websocket握手的检验，也即测试服务器是否提供websocket服务，如果提供，Sec-WebSocket-Key和Sec-WebSocket-Accept必然是有对应关系的，具体的关系如下：

Sec-WebSocket-Key拼接上258EAFA5-E914-47DA-95CA-C5AB0DC85B11(这串magic string是写在协议里面的，所有的websocket底层实现都要拼接该串)

得到对拼接结果

JkTukkPc4Rha+nIkbYhEkQ==258EAFA5-E914-47DA-95CA-C5AB0DC85B11

使用SHA-1（160数位）进行哈希操作，对哈希后的结果base64 进行编码，就可以得到结果

RD69G0BS8RPH/GbY6rBsZI75pjk=

以上操作不仅仅是服务端要做，客户端也同样做了该操作，然后将自己计算得到的结果和服务器传来的Sec-WebSocket-Accept作比较，如果相等则没问题，握手成功，如果不一致，则握手失败。

3、Origin用于防止未授权的跨域脚本攻击，服务器可以从Origin决定是否接受该WebSocket连接，所有来源于浏览器的请求都会带上该请求头。如，已授权站点www.mydomain.com，并且产生cookie，用户没关闭授权站点的时候点击另外的www.hack.com下面的链接，则该连接可以带着授权的cookie去做很多事。如果有了Origin，并且在服务端setAllowedOrigins("www.mydomain.com")则可以避免。

4、Sec-WebSocket-Version: 13 ，表明了websocket的版本，以前各厂商混战的时候什么样的版本都有，还好现在已经统一了，用13版即可。

## 代码以及部署 ##

我的程序部署于tomcat7.0.5，基于Spring 4.3.7，需要使用支持websocket的IE10、Chrome和Firefox等较高级别版本的浏览器打开。

程序主要分为6个部分：2个配置xml、3个java文件、1个jsp。

前台主要用H5提供的websocket对象，它存在于顶层对象window下，凡是支持H5的浏览器都实现了该对象。

后台主要用Spring提供的websocket配置类WebSocketConfigurer、拦截器HttpSessionHandshakeInterceptor和处理器AbstractWebSocketHandler来实现。

如下：

web.xml

\[html\]  [view plain][]  [copy][view plain]

1.  <?xml version="1.0" encoding="UTF-8"?>  
2.  <web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app\_2\_5.xsd" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app\_3\_0.xsd" id="WebApp\_ID" version="3.0">  
3.    <display-name>WebsocketTest</display-name>  
4.      
5.      <servlet>  
6.          <servlet-name>springmvc</servlet-name>  
7.          <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>  
8.          <init-param>  
9.          <param-name>contextConfigLocation</param-name>  
10.           
11.         <param-value>/WEB-INF/spring-mvc.xml</param-value>   
12.         </init-param>  
13.     </servlet>  
14.     <servlet-mapping>  
15.         <servlet-name>springmvc</servlet-name>  
16.         <url-pattern>\*.sc</url-pattern>  
17.     </servlet-mapping>  
18.   
19.   <welcome-file-list>  
20.     <welcome-file>index.html</welcome-file>  
21.     <welcome-file>index.htm</welcome-file>  
22.     <welcome-file>index.jsp</welcome-file>  
23.     <welcome-file>default.html</welcome-file>  
24.     <welcome-file>default.htm</welcome-file>  
25.     <welcome-file>default.jsp</welcome-file>  
26.   </welcome-file-list>  
27. </web-app>

spring-mvc.xml

\[html\]  [view plain][]  [copy][view plain]

1.  <?xml version="1.0" encoding="UTF-8"?>    
2.  <beans xmlns="http://www.springframework.org/schema/beans"    
3.      xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:aop="http://www.springframework.org/schema/aop"    
4.      xmlns:tx="http://www.springframework.org/schema/tx" xmlns:p="http://www.springframework.org/schema/p"    
5.      xmlns:context="http://www.springframework.org/schema/context"    
6.      xsi:schemaLocation="    
7.              http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-3.2.xsd    
8.              http://www.springframework.org/schema/aop http://www.springframework.org/schema/aop/spring-aop-3.2.xsd    
9.              http://www.springframework.org/schema/tx http://www.springframework.org/schema/tx/spring-tx-3.2.xsd    
10.             http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-3.2.xsd">    
11.    <context:component-scan base-package="com.websocket"></context:component-scan>    
12. </beans>

WebSocketConfig.java

\[java\]  [view plain][]  [copy][view plain]

1.  package com.websocket;  
2.    
3.  import org.springframework.context.annotation.Bean;  
4.  import org.springframework.context.annotation.Configuration;  
5.  import org.springframework.web.socket.config.annotation.EnableWebSocket;  
6.  import org.springframework.web.socket.config.annotation.WebSocketConfigurer;  
7.  import org.springframework.web.socket.config.annotation.WebSocketHandlerRegistry;  
8.    
9.    
10. /\*\* 
11.  \* @author wuwenhai 
12.  \* @since JDK1.6 
13.  \* @history 2017-6-3 wuwenhai 新建 
14.  \* 配置websocket入口，允许访问的域、注册Handler、SockJs支持和拦截器 
15.  \*/  
16. @Configuration  //配置类    
17. @EnableWebSocket  //声明支持websocket    
18. public class WebSocketConfig implements WebSocketConfigurer\{    
19.     
20.     @Override    
21.     public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) \{    
22.     <span style="white-space:pre;">   </span>String\[\] allowsOrigins=\{ "http://localhost:8080"\};  
23.     <span style="white-space:pre;">   </span>//addHandler注册和路由的功能，当客户端发起websocket连接，把/path交给对应的handler处理，而不实现具体的业务逻辑，可以理解为收集和任务分发中心。  
24.     <span style="white-space:pre;">   </span>//setAllowedOrigins(String\[\] domains),允许指定的域名或IP(含端口号)建立长连接，默认只有本地。如果不限时使用"\*"号，如果指定了域名，则必须要以http或https开头。  
25.     <span style="white-space:pre;">   </span>//addInterceptors，顾名思义就是为handler添加拦截器，可以在调用handler前后加入自定义的逻辑代码。  
26.         registry.addHandler(ChatRoom(), "/chat.sc").setAllowedOrigins("\*").addInterceptors(handshakeInterceptor());   
27.         //允许客户端使用SockJS    
28.         //SockJS 是一个浏览器上运行的 JavaScript 库，如果浏览器不支持 WebSocket，该库可以模拟对 WebSocket 的支持。  
29.         registry.addHandler(ChatRoom(), "/sockjs/chat.sc").addInterceptors(handshakeInterceptor()).withSockJS();    
30.     \}    
31.     
32.     @Bean    
33.     public HandshakeInterceptor handshakeInterceptor()\{    
34.         return new HandshakeInterceptor();    
35.     \}    
36.       
37.     @Bean    
38.     public ChatRoom ChatRoom()\{    
39.         return new ChatRoom();    
40.     \}  
41.     
42. \}    
43.

HandshakeInterceptor.java

\[java\]  [view plain][]  [copy][view plain]

1.  package com.websocket;  
2.    
3.  import java.util.Map;  
4.  import java.util.Random;  
5.  import org.springframework.http.server.ServerHttpRequest;  
6.  import org.springframework.http.server.ServerHttpResponse;  
7.  import org.springframework.web.socket.WebSocketHandler;  
8.  import org.springframework.web.socket.server.support.HttpSessionHandshakeInterceptor;  
9.    
10. /\*\* 
11.  \* @author wuwenhai 
12.  \* @since JDK1.6 
13.  \* @history 2017-6-3 wuwenhai 新建 
14.  \* 握手拦截器，在连接时做一些事情 
15.  \*/  
16. public class HandshakeInterceptor extends HttpSessionHandshakeInterceptor\{    
17.     @Override    
18.     public boolean beforeHandshake(ServerHttpRequest request, ServerHttpResponse response, WebSocketHandler handler, Map<String, Object> attributes) throws Exception \{    
19.         //attributes是session里面的所有属性的map表示  
20.         attributes.put("user", getRandomNickName());  
21.         return super.beforeHandshake(request, response, handler, attributes);    
22.     \}   
23.       
24.     @Override    
25.     public void afterHandshake(ServerHttpRequest request, ServerHttpResponse response, WebSocketHandler wsHandler, Exception ex) \{    
26.         super.afterHandshake(request, response, wsHandler, ex);    
27.     \}          
28.       
29.     //给每个进来的人(session)随机分配个昵称，这里没做控制，所以聊天室内的昵称可能发生重复  
30.     public String getRandomNickName()\{  
31.         String\[\] nickNameArray=\{ "Captain America","Deadpool","Hawkeye","Hulk","Iron Man","Spider Man","Thor","Wolverine","Black Panther","Colossus"\};  
32.         Random random=new Random();  
33.         return nickNameArray\[random.nextInt(10)\];  
34.     \}  
35. \}

ChatRoom.java

\[html\]  [view plain][]  [copy][view plain]

1.  package com.websocket;  
2.    
3.  import java.io.File;  
4.  import java.io.FileInputStream;  
5.  import java.io.FileOutputStream;  
6.  import java.io.IOException;  
7.  import java.nio.ByteBuffer;  
8.  import java.text.SimpleDateFormat;  
9.  import java.util.ArrayList;  
10. import java.util.Collections;  
11. import java.util.Date;  
12. import java.util.List;  
13. import org.apache.log4j.Logger;  
14. import org.springframework.web.socket.BinaryMessage;  
15. import org.springframework.web.socket.CloseStatus;  
16. import org.springframework.web.socket.TextMessage;  
17. import org.springframework.web.socket.WebSocketSession;  
18. import org.springframework.web.socket.handler.AbstractWebSocketHandler;

\[html\]  [view plain][]  [copy][view plain]

1.  /\*\*  
2.   \* @author wuwenhai  
3.   \* @since JDK1.6  
4.   \* @history 2017-6-3 wuwenhai 新建  
5.   \* 聊天室代码  
6.   \*/  
7.  public class ChatRoom extends AbstractWebSocketHandler\{  
8.    
9.      public final static List<WebSocketSession> sessionList = Collections.synchronizedList(new ArrayList<WebSocketSession>());  
10.     SimpleDateFormat format=new SimpleDateFormat("yyyy-MM-dd hh:mm:ss");  
11.     Logger logger = Logger.getLogger(this.getClass());  
12.     FileOutputStream output;  
13.     @Override    
14.     public void afterConnectionEstablished(WebSocketSession webSocketSession) throws Exception \{    
15.         System.out.println("Connection established..."+webSocketSession.getRemoteAddress());    
16.         System.out.println(webSocketSession.getAttributes().get("user")+" Login");  
17.         webSocketSession.sendMessage(new TextMessage("I'm "+(webSocketSession.getAttributes().get("user"))));  
18.         sessionList.add(webSocketSession);  
19.     \}    
20.       
21.     @Override    
22.     public void afterConnectionClosed(WebSocketSession webSocketSession, CloseStatus status) throws Exception \{    
23.         System.out.println("Connection closed..."+webSocketSession.getRemoteAddress()+" "+status);   
24.         System.out.println(webSocketSession.getAttributes().get("user")+" Logout");  
25.         sessionList.remove(webSocketSession);  
26.     \}  
27.       
28.     @Override  
29.     public void handleTextMessage(WebSocketSession websocketsession, TextMessage message)  
30.     \{  
31.         String payload=message.getPayload();  
32.         String textString;  
33.         try \{  
34.             if(payload.endsWith(":fileStart"))\{  
35.                 output=new FileOutputStream(new File("D:\\\\images\\\\"+payload.split(":")\[0\]));  
36.             \}else if(payload.endsWith(":fileFinishSingle"))\{  
37.                 output.close();  
38.                 String fileName=payload.split(":")\[0\];  
39.                 for(WebSocketSession session:sessionList)\{  
40.                     if(session.getId().equals(websocketsession.getId()))\{  
41.                         textString=" I ("\+format.format(new Date())+")<br>";  
42.                     \}else\{  
43.                         textString=websocketsession.getAttributes().get("user")+" ("+format.format(new Date())+")<br>";  
44.                     \}  
45.                     TextMessage textMessage = new TextMessage(textString);   
46.                     session.sendMessage(textMessage);   
47.                     sendPicture(session,fileName);  
48.                 \}  
49.             \}else if(payload.endsWith(":fileFinishWithText"))\{  
50.                 output.close();  
51.                 String fileName=payload.split(":")\[0\];  
52.                 for(WebSocketSession session:sessionList)\{  
53.                     sendPicture(session,fileName);  
54.                 \}  
55.             \}else\{  
56.                 for(WebSocketSession session: sessionList)\{  
57.                     if(session.getId().equals(websocketsession.getId()))\{  
58.                         textString=" I ("\+format.format(new Date())+")<br>"+payload;  
59.                     \}else\{  
60.                         textString=websocketsession.getAttributes().get("user")+" ("+format.format(new Date())+")<br>"+payload;  
61.                     \}  
62.                     TextMessage textMessage = new TextMessage(textString);   
63.                     session.sendMessage(textMessage);   
64.                 \}  
65.             \}  
66.         \} catch (IOException e) \{  
67.             e.printStackTrace();  
68.         \}  
69.     \}  
70.     
71.     @Override  
72.     public void handleBinaryMessage(WebSocketSession session, BinaryMessage message)  
73.     \{  
74.         ByteBuffer buffer= message.getPayload();  
75.         try \{  
76.             output.write(buffer.array());  
77.         \} catch (IOException e) \{  
78.             e.printStackTrace();  
79.         \}  
80.     \}  
81.       
82.     @Override    
83.     public void handleTransportError(WebSocketSession webSocketSession, Throwable throwable) throws Exception \{    
84.         if(webSocketSession.isOpen())\{    
85.             webSocketSession.close();    
86.         \}    
87.         System.out.println(throwable.toString());    
88.         System.out.println("WS connection error,close..."+webSocketSession.getRemoteAddress());    
89.     \}    
90.     
91.     @Override    
92.     public boolean supportsPartialMessages() \{    
93.         return true;    
94.     \}    
95.         
96.     public void sendPicture(WebSocketSession session,String fileName)\{  
97.         FileInputStream input;  
98.         try \{  
99.             File file=new File("D:\\\\images\\\\"+fileName);  
100.             input = new FileInputStream(file);  
101.             byte bytes\[\] = new byte\[(int) file.length()\];   
102.             input.read(bytes);  
103.             BinaryMessage byteMessage=new BinaryMessage(bytes);  
104.             session.sendMessage(byteMessage);  
105.             input.close();  
106.         \} catch (Exception e) \{  
107.             e.printStackTrace();  
108.         \}  
109.     \}  
110. \}

chatRoom.jsp

\[html\]  [view plain][]  [copy][view plain]

1.  <!DOCTYPE html>    
2.  <html>    
3.  <head>    
4.  <meta charset="UTF-8">    
5.  <title>Insert title here</title>    
6.  <script type="text/javascript" src="js/sockjs.min.js"></script>    
7.  <script type="text/javascript" src="js/jquery.js"></script>    
8.  <script type="text/javascript">    
9.      var url = "127.0.0.1:8080/websocket";    
10.     var websocket = null;    
11.     if ('WebSocket' in window) \{    
12.         websocket = new WebSocket("ws://" + url + "/chat.sc");    
13.     \} else \{    
14.         websocket = new SockJS("http://" + url + "/sockjs/chat.sc");    
15.     \}    
16.     websocket.onopen = onOpen;    
17.     websocket.onmessage = onMessage;    
18.     websocket.onerror = onError;    
19.     websocket.onclose = onClose;    
20.     
21.     function onOpen(openEvent) \{    
22.         document.getElementById("plane").innerHTML = document.getElementById("plane").innerHTML+ "OPEN<br/>";   
23.     \}    
24.     
25.     function onMessage(event) \{    
26.         if(typeof event.data =='string')\{  
27.             var element = document.createElement("p");  
28.             element.innerHTML=event.data;  
29.             document.getElementById("plane").appendChild(element);  
30.         \}else\{  
31.             var reader = new FileReader();  
32.             reader.onload=function(eve)\{  
33.                  if(eve.target.readyState==FileReader.DONE)  
34.                  \{  
35.                     var img = document.createElement("img");  
36.                     img.src=this.result;  
37.                     document.getElementById("plane").appendChild(img);  
38.                  \}  
39.              \};  
40.              reader.readAsDataURL(event.data);  
41.         \}  
42.     \}    
43.     function onError() \{    
44.     \}    
45.     function onClose(event) \{    
46.         console.log(event.reason)  
47.         document.getElementById("plane").innerHTML = document.getElementById("plane").innerHTML+ "CLOSE<br/>";    
48.     \}    
49.     
50.     function doSend() \{    
51.         if (websocket.readyState == 1) \{  //0-CONNECTING;1-OPEN;2-CLOSING;3-CLOSED  
52.             var msg = document.getElementById("message").value;  
53.             if(msg)\{  
54.                 websocket.send(msg);   
55.             \}  
56.             sendFile(msg);  
57.             document.getElementById("message").value="";  
58.         \} else \{    
59.             alert("connect fail!");    
60.         \}    
61.     \}    
62.         
63.     function sendFile(isWithText)\{  
64.         var inputElement = document.getElementById("file");  
65.         var fileList = inputElement.files;  
66.         var file=fileList\[0\];  
67.         if(!file) return;  
68.         websocket.send(file.name+":fileStart");  
69.         var reader = new FileReader();  
70.         //以二进制形式读取文件  
71.         reader.readAsArrayBuffer(file);  
72.         //文件读取完毕后该函数响应  
73.         reader.onload = function loaded(evt) \{  
74.             var blob = evt.target.result;  
75.             //发送二进制表示的文件  
76.             websocket.send(blob);  
77.             if(isWithText)\{  
78.                 websocket.send(file.name+":fileFinishWithText");  
79.             \}else\{  
80.                 websocket.send(file.name+":fileFinishSingle");  
81.             \}  
82.             console.log("finnish");  
83.         \}  
84.         inputElement.outerHTML=inputElement.outerHTML; //清空<input type="file">的值  
85.     \}  
86.       
87.     function disconnect()\{    
88.         if (websocket != null) \{    
89.             websocket.close();    
90.             websocket = null;    
91.         \}    
92.     \}    
93.         
94.     function reconnect()\{    
95.         if (websocket != null) \{    
96.             websocket.close();    
97.             websocket = null;    
98.         \}    
99.         if ('WebSocket' in window) \{    
100.             websocket = new WebSocket("ws://" + url + "/chat.sc");    
101.         \} else \{    
102.             websocket = new SockJS("http://" + url + "/sockjs/chat.sc");    
103.         \}    
104.         websocket.onopen = onOpen;    
105.         websocket.onmessage = onMessage;    
106.         websocket.onerror = onError;    
107.         websocket.onclose = onClose;    
108.     \}    
109.     function clean()\{  
110.         document.getElementById("plane").innerHTML = "";    
111.     \}  
112. </script>    
113. </head>    
114. <body>    
115.     <div>    
116.         <button id="disconnect" onclick="disconnect()">disconnect</button>    
117.         <button id="send" onclick="doSend()">send</button>    
118.         <button id="reconnect" onclick="reconnect()">reconnect</button>    
119.         <button id="clean" onclick="clean()">clean</button>   
120.           
122.         <input type="file" id="file" />  
123.     </div>    
124.     <div>    
125.        <input id="message"  type="text" style="width: 350px"></input>    
126.     </div>    
127.     <div id="plane"></div>    
128. </body>    
129. </html>

部署成功后，访问http://localhost:8080/websocket/view/chatRoom.jsp 可以得到效果如下图所示，分别是聊天室内3个人的聊天页面：

![Center 3][]

![Center 4][]

![Center 5][]

[view plain]: https://blog.csdn.net/a4227139/article/details/75041160#
[Center]: https://img-blog.csdn.net/20170713214527176?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvYTQyMjcxMzk=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
[Center 1]: /images/20210516/701e03b34dd14fd2998bb2333d981757.png
[Center 2]: /images/20210516/59e37043d35e4322a260dc9dd512961f.png
[Center 3]: /images/20210516/521d097a29a5472fa0745c208df9ad51.png
[Center 4]: /images/20210516/53daa565b2e5485c9a62a4d3d4d7cba1.png
[Center 5]: /images/20210516/8af33bd82ab44ee59f1a4bd51e8949a1.png