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

最新推荐文章于 2023-09-28 15:48:00 发布

光_影

最新推荐文章于 2023-09-28 15:48:00 发布

阅读量1k

点赞数 2

本文深入探讨了WebSocket技术，对比了推(PUSH)和拉(PULL)两种Web通信方式，详细解释了长轮询和长连接的概念及其应用。通过具体实例，展示了如何在Spring框架下配置和实现WebSocket，包括代码实现和部署过程。

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

谈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流实现方式：

服务端代码：

while(true){
while(!condition){//模拟阻塞，等待条件成熟，推送信息
Thread.sleep(1000);
}
num++;
PrintWriter pw = resp.getWriter();
pw.println("<script>parent.changeNumber("+num+")</script>");
pw.flush();
}

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

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

写在浏览器里面

客户端代码：

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

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

ajax长轮询方式：

服务端代码：

@RequestMapping(value = "/list")
public String list(HttpServletRequest request) {
while(condition){//等待条件成熟
//do something
break;
}
return "something";
}

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

$.ajax({
type: "POST",
url: "/web/goods/list",
data: JSON.stringify({data:'hello'}),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (result) {
//do something
}
});

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

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

WebSocket

WebSocket是什么？

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

WebSocket和HTTP有什么关系么？

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

传统的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）分析：

请求

GET /chat HTTP/1.1
Host: 127.0.0.1:8080
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Key: JkTukkPc4Rha+nIkbYhEkQ==
Sec-WebSocket-Version: 13
Origin: http://localhost:8080

响应

HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: RD69G0BS8RPH/GbY6rBsZI75pjk=
Server:Apache-Coyote/1.1
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

<?xml version="1.0" encoding="UTF-8"?>
<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">
<display-name>WebsocketTest</display-name>
<servlet>
<servlet-name>springmvc</servlet-name>
<servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
<init-param>
<param-name>contextConfigLocation</param-name>

<param-value>/WEB-INF/spring-mvc.xml</param-value> 
</init-param>
</servlet>
<servlet-mapping>
<servlet-name>springmvc</servlet-name>
<url-pattern>*.sc</url-pattern>
</servlet-mapping>
<welcome-file-list>
<welcome-file>index.html</welcome-file>
<welcome-file>index.htm</welcome-file>
<welcome-file>index.jsp</welcome-file>
<welcome-file>default.html</welcome-file>
<welcome-file>default.htm</welcome-file>
<welcome-file>default.jsp</welcome-file>
</welcome-file-list>
</web-app>

spring-mvc.xml

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:aop="http://www.springframework.org/schema/aop"
xmlns:tx="http://www.springframework.org/schema/tx" xmlns:p="http://www.springframework.org/schema/p"
xmlns:context="http://www.springframework.org/schema/context"
xsi:schemaLocation="
http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-3.2.xsd
http://www.springframework.org/schema/aop http://www.springframework.org/schema/aop/spring-aop-3.2.xsd
http://www.springframework.org/schema/tx http://www.springframework.org/schema/tx/spring-tx-3.2.xsd
http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-3.2.xsd">
<context:component-scan base-package="com.websocket"></context:component-scan>
</beans>

WebSocketConfig.java

package com.websocket;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.socket.config.annotation.EnableWebSocket;
import org.springframework.web.socket.config.annotation.WebSocketConfigurer;
import org.springframework.web.socket.config.annotation.WebSocketHandlerRegistry;
/**
* @author wuwenhai
* @since JDK1.6
* @history 2017-6-3 wuwenhai 新建
* 配置websocket入口，允许访问的域、注册Handler、SockJs支持和拦截器
*/
@Configuration //配置类
@EnableWebSocket //声明支持websocket
public class WebSocketConfig implements WebSocketConfigurer{
@Override
public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {
String[] allowsOrigins={"http://localhost:8080"};
//addHandler注册和路由的功能，当客户端发起websocket连接，把/path交给对应的handler处理，而不实现具体的业务逻辑，可以理解为收集和任务分发中心。
//setAllowedOrigins(String[] domains),允许指定的域名或IP(含端口号)建立长连接，默认只有本地。如果不限时使用"*"号，如果指定了域名，则必须要以http或https开头。
//addInterceptors，顾名思义就是为handler添加拦截器，可以在调用handler前后加入自定义的逻辑代码。
registry.addHandler(ChatRoom(), "/chat.sc").setAllowedOrigins("*").addInterceptors(handshakeInterceptor());
//允许客户端使用SockJS
//SockJS 是一个浏览器上运行的 JavaScript 库，如果浏览器不支持 WebSocket，该库可以模拟对 WebSocket 的支持。
registry.addHandler(ChatRoom(), "/sockjs/chat.sc").addInterceptors(handshakeInterceptor()).withSockJS();
}
@Bean
public HandshakeInterceptor handshakeInterceptor(){
return new HandshakeInterceptor();
}
@Bean
public ChatRoom ChatRoom(){
return new ChatRoom();
}
}

HandshakeInterceptor.java

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

ChatRoom.java

package com.websocket;
import java.io.File;
import java.io.FileInputStream;
import java.io.FileOutputStream;
import java.io.IOException;
import java.nio.ByteBuffer;
import java.text.SimpleDateFormat;
import java.util.ArrayList;
import java.util.Collections;
import java.util.Date;
import java.util.List;
import org.apache.log4j.Logger;
import org.springframework.web.socket.BinaryMessage;
import org.springframework.web.socket.CloseStatus;
import org.springframework.web.socket.TextMessage;
import org.springframework.web.socket.WebSocketSession;
import org.springframework.web.socket.handler.AbstractWebSocketHandler;

/**
* @author wuwenhai
* @since JDK1.6
* @history 2017-6-3 wuwenhai 新建
* 聊天室代码
*/
public class ChatRoom extends AbstractWebSocketHandler{
public final static List<WebSocketSession> sessionList = Collections.synchronizedList(new ArrayList<WebSocketSession>());
SimpleDateFormat format=new SimpleDateFormat("yyyy-MM-dd hh:mm:ss");
Logger logger = Logger.getLogger(this.getClass());
FileOutputStream output;
@Override
public void afterConnectionEstablished(WebSocketSession webSocketSession) throws Exception {
System.out.println("Connection established..."+webSocketSession.getRemoteAddress());
System.out.println(webSocketSession.getAttributes().get("user")+" Login");
webSocketSession.sendMessage(new TextMessage("I'm "+(webSocketSession.getAttributes().get("user"))));
sessionList.add(webSocketSession);
}
@Override
public void afterConnectionClosed(WebSocketSession webSocketSession, CloseStatus status) throws Exception {
System.out.println("Connection closed..."+webSocketSession.getRemoteAddress()+" "+status);
System.out.println(webSocketSession.getAttributes().get("user")+" Logout");
sessionList.remove(webSocketSession);
}
@Override
public void handleTextMessage(WebSocketSession websocketsession, TextMessage message)
{
String payload=message.getPayload();
String textString;
try {
if(payload.endsWith(":fileStart")){
output=new FileOutputStream(new File("D:\\images\\"+payload.split(":")[0]));
}else if(payload.endsWith(":fileFinishSingle")){
output.close();
String fileName=payload.split(":")[0];
for(WebSocketSession session:sessionList){
if(session.getId().equals(websocketsession.getId())){
textString=" I ("+format.format(new Date())+")<br>";
}else{
textString=websocketsession.getAttributes().get("user")+" ("+format.format(new Date())+")<br>";
}
TextMessage textMessage = new TextMessage(textString);
session.sendMessage(textMessage);
sendPicture(session,fileName);
}
}else if(payload.endsWith(":fileFinishWithText")){
output.close();
String fileName=payload.split(":")[0];
for(WebSocketSession session:sessionList){
sendPicture(session,fileName);
}
}else{
for(WebSocketSession session: sessionList){
if(session.getId().equals(websocketsession.getId())){
textString=" I ("+format.format(new Date())+")<br>"+payload;
}else{
textString=websocketsession.getAttributes().get("user")+" ("+format.format(new Date())+")<br>"+payload;
}
TextMessage textMessage = new TextMessage(textString);
session.sendMessage(textMessage);
}
}
} catch (IOException e) {
e.printStackTrace();
}
}
@Override
public void handleBinaryMessage(WebSocketSession session, BinaryMessage message)
{
ByteBuffer buffer= message.getPayload();
try {
output.write(buffer.array());
} catch (IOException e) {
e.printStackTrace();
}
}
@Override
public void handleTransportError(WebSocketSession webSocketSession, Throwable throwable) throws Exception {
if(webSocketSession.isOpen()){
webSocketSession.close();
}
System.out.println(throwable.toString());
System.out.println("WS connection error,close..."+webSocketSession.getRemoteAddress());
}
@Override
public boolean supportsPartialMessages() {
return true;
}
public void sendPicture(WebSocketSession session,String fileName){
FileInputStream input;
try {
File file=new File("D:\\images\\"+fileName);
input = new FileInputStream(file);
byte bytes[] = new byte[(int) file.length()];
input.read(bytes);
BinaryMessage byteMessage=new BinaryMessage(bytes);
session.sendMessage(byteMessage);
input.close();
} catch (Exception e) {
e.printStackTrace();
}
}
}

chatRoom.jsp

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/sockjs.min.js"></script>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
var url = "127.0.0.1:8080/websocket";
var websocket = null;
if ('WebSocket' in window) {
websocket = new WebSocket("ws://" + url + "/chat.sc");
} else {
websocket = new SockJS("http://" + url + "/sockjs/chat.sc");
}
websocket.onopen = onOpen;
websocket.onmessage = onMessage;
websocket.onerror = onError;
websocket.onclose = onClose;
function onOpen(openEvent) {
document.getElementById("plane").innerHTML = document.getElementById("plane").innerHTML+ "OPEN<br/>";
}
function onMessage(event) {
if(typeof event.data =='string'){
var element = document.createElement("p");
element.innerHTML=event.data;
document.getElementById("plane").appendChild(element);
}else{
var reader = new FileReader();
reader.onload=function(eve){
if(eve.target.readyState==FileReader.DONE)
{
var img = document.createElement("img");
img.src=this.result;
document.getElementById("plane").appendChild(img);
}
};
reader.readAsDataURL(event.data);
}
}
function onError() {
}
function onClose(event) {
console.log(event.reason)
document.getElementById("plane").innerHTML = document.getElementById("plane").innerHTML+ "CLOSE<br/>";
}
function doSend() {
if (websocket.readyState == 1) { //0-CONNECTING;1-OPEN;2-CLOSING;3-CLOSED
var msg = document.getElementById("message").value;
if(msg){
websocket.send(msg);
}
sendFile(msg);
document.getElementById("message").value="";
} else {
alert("connect fail!");
}
}
function sendFile(isWithText){
var inputElement = document.getElementById("file");
var fileList = inputElement.files;
var file=fileList[0];
if(!file) return;
websocket.send(file.name+":fileStart");
var reader = new FileReader();
//以二进制形式读取文件
reader.readAsArrayBuffer(file);
//文件读取完毕后该函数响应
reader.onload = function loaded(evt) {
var blob = evt.target.result;
//发送二进制表示的文件
websocket.send(blob);
if(isWithText){
websocket.send(file.name+":fileFinishWithText");
}else{
websocket.send(file.name+":fileFinishSingle");
}
console.log("finnish");
}
inputElement.outerHTML=inputElement.outerHTML; //清空<input type="file">的值
}
function disconnect(){
if (websocket != null) {
websocket.close();
websocket = null;
}
}
function reconnect(){
if (websocket != null) {
websocket.close();
websocket = null;
}
if ('WebSocket' in window) {
websocket = new WebSocket("ws://" + url + "/chat.sc");
} else {
websocket = new SockJS("http://" + url + "/sockjs/chat.sc");
}
websocket.onopen = onOpen;
websocket.onmessage = onMessage;
websocket.onerror = onError;
websocket.onclose = onClose;
}
function clean(){
document.getElementById("plane").innerHTML = "";
}
</script>
</head>
<body>
<div>
<button id="disconnect" onclick="disconnect()">disconnect</button>
<button id="send" onclick="doSend()">send</button>
<button id="reconnect" onclick="reconnect()">reconnect</button>
<button id="clean" onclick="clean()">clean</button>
<!-- <br>
<input type="button" value="sendFile" onclick="sendFile()"/> -->
<input type="file" id="file" />
</div>
<div>
<input id="message" type="text" style="width: 350px"></input>
</div>
<div id="plane"></div>
</body>
</html>