java websocket多用户_SpringBoot+WebSocket搭建简单的多人聊天系统

本文介绍了如何使用SpringBoot和WebSocket构建一个简单的多用户聊天系统。通过WebSocket的@ServerEndpoint注解实现服务器端接口,创建WebSocket类处理连接、关闭、消息接收和错误事件。前端使用简单的HTML进行交互,当用户发送消息时,WebSocket会将消息推送到所有在线用户。此系统展示了WebSocket在全双工通信中的优势,解决了HTTP的多次请求问题。
摘要由CSDN通过智能技术生成

前言

今天闲来无事,就来了解一下WebSocket协议。来简单了解一下吧。

WebSocket是什么

首先了解一下WebSocket是什么?WebSocket是一种在单个TCP连接上进行全双工通信的协议。这是一种比较官方的说法,简单点来说就是,在一次TCP连接中,通信的双方可以相互通信。比如A和B在打电话,A说话的时候,B也可以说话来进行信息的交互,这就叫做全双工通信。对应的是单工通信,和半双工通信,单工通信就是只能由A向B通信,比如电脑和打印机。半双工通信是可以AB可以互相通信,但是同一时间只能进行单向通信,比如对讲机。

WebSocket与http有啥区别

b6c9d2cb3eeaa25641070c92893cde21.png

相同点

都建立在TCP之上,通过TCP协议来传输数据。

不同点

HTTP协议为单向协议,即浏览器只能向服务器请求资源,服务器才能将数据传送给浏览器,而服务器不能主动向浏览器传递数据。分为长连接和短连接,短连接是每次http请求时都需要三次握手才能发送自己的请求,每个request对应一个response;长连接是短时间内保持连接,保持TCP不断开,指的是TCP连接。

WebSocket一种双向通信协议,在建立连接后,WebSocket服务器和客户端都能主动的向对方发送或接收数据,就像Socket一样,不同的是WebSocket是一种建立在Web基础上的一种简单模拟Socket的协议;WebSocket需要通过握手连接,类似于TCP它也需要客户端和服务器端进行握手连接,连接成功后才能相互通信。WebSocket在建立握手连接时,数据是通过http协议传输的,“GET/chat HTTP/1.1”,这里面用到的只是http协议一些简单的字段。但是在建立连接之后,真正的数据传输阶段是不需要http协议参与的。

用处

WebSocket解决客户端发起多个http请求到服务器资源浏览器必须要经过长时间的轮询问题。

使用WebSocket搭建一个多人聊天系统

引入WebSocket的jar包

Gradle:

compile group: 'org.springframework.boot', name: 'spring-boot-starter-websocket', version: '2.1.8.RELEASE'

Maven:

org.springframework.boot

spring-boot-starter-websocket

2.1.8.RELEASE

添加对WebSocket的支持

注入ServerEndpointExporter,这个bean会自动注册使用了@ServerEndpoint注解声明的Websocket endpoint。

import org.springframework.context.annotation.Bean;

import org.springframework.context.annotation.Configuration;

import org.springframework.web.socket.server.standard.ServerEndpointExporter;

/**

* @author: zp

* @Date: 2019-09-18 10:03

* @Description:

*/

@Configuration

public class AppConfiguration {

@Bean

public ServerEndpointExporter serverEndpointExporter(){

return new ServerEndpointExporter();

}

}

创建WebSocket的实现类

@ServerEndpoint("/webSocket/{page}")中的值就是需要访问的地址,和Controller中的@RequestMapping有点类似。然后实现@OnOpen(打开连接),@OnClose(关闭连接),@onMessage(收到消息),@Error(触发异常)。

import org.slf4j.Logger;

import org.slf4j.LoggerFactory;

import org.springframework.stereotype.Component;

import javax.websocket.*;

import javax.websocket.server.PathParam;

import javax.websocket.server.ServerEndpoint;

import java.io.IOException;

import java.util.Map;

import java.util.Set;

import java.util.concurrent.ConcurrentHashMap;

import java.util.concurrent.CopyOnWriteArraySet;

import java.util.concurrent.atomic.AtomicInteger;

/**

* @author: zp

* @Date: 2019-09-20 15:12

* @Description:

*/

@Component

@ServerEndpoint("/webSocket/{page}")

public class WebSocket {

private Logger log = LoggerFactory.getLogger(this.getClass());

/**

* 用来记录房间的人数

*/

private static AtomicInteger onlinePersons = new AtomicInteger(0);

/**

* 用来记录房间及人数

*/

private static Map roomMap = new ConcurrentHashMap(8);

@OnOpen

public void open(@PathParam("page") String page, Session session) throws IOException {

Set set = roomMap.get(page);

// 如果是新的房间,则创建一个映射,如果房间已存在,则把用户放进去

if(set == null){

set = new CopyOnWriteArraySet();

set.add(session);

roomMap.put(page,set);

}else{

set.add(session);

}

// 房间人数+1

onlinePersons.incrementAndGet();

log.info("新用户{}进入聊天,房间人数:{}",session.getId(),onlinePersons);

}

@OnClose

public void close(@PathParam("page") String page, Session session){

// 如果某个用户离开了,就移除相应的信息

if(roomMap.containsKey(page)){

roomMap.get(page).remove(session);

}

// 房间人数-1

onlinePersons.decrementAndGet();

log.info("用户{}退出聊天,房间人数:{}",session.getId(),onlinePersons);

}

@OnMessage

public void reveiveMessage(@PathParam("page") String page, Session session,String message) throws IOException {

log.info("接受到用户{}的数据:{}",session.getId(),message);

// 拼接一下用户信息

String msg = session.getId()+" : "+ message;

Set sessions = roomMap.get(page);

// 给房间内所有用户推送信息

for(Session s : sessions){

s.getBasicRemote().sendText(msg);

}

}

@OnError

public void error(Throwable throwable){

try {

throw throwable;

} catch (Throwable e) {

log.error("未知错误");

}

}

}

写个超级简单的页面测试一下

前端有点菜,写不出好看的ui,见谅~

springboot项目WebSocket测试demo

springboot项目websocket测试demo

测试说明
文本框中数据数据,点击‘发送测试',文本框中的数据会发送到后台websocket,后台接受到之后,会再推送数据到前端,展示在下方;点击关闭连接,可以关闭该websocket;可以跟踪代码,了解具体的流程;代码上有详细注解

发送测试


关闭连接


var websocket = null;

if('WebSocket' in window){

websocket = new WebSocket("ws://127.0.0.1:9999/webSocket/1");

}else{

alert("您的浏览器不支持websocket");

}

websocket.onerror = function(){

setMessageInHtml("send error!");

}

websocket.onopen = function(){

setMessageInHtml("连接成功!")

setTimeout(function(){setMessageInHtml("欢迎来到这里!")

},2000)

}

websocket.onmessage = e => setMessageInHtml(e.data)

websocket.onclose = function(){

setMessageInHtml("连接断开!")

}

window.onbeforeunload = function(){

clos();

}

function setMessageInHtml(message){

document.getElementById('message').innerHTML += message+"";

}

function clos(){

websocket.close(3000,"强制关闭");

}

function send(){

var msg = document.getElementById('text').value;

websocket.send(msg);

}

测试

5fda7ed600774c2da460b08624e0c33e.png

总结

以上所述是小编给大家介绍的SpringBoot+WebSocket搭建简单的多人聊天系统,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值