标签：聊天室 websocket SpringBoot getId session WebSocket message public
SpringBoot集成WebSocket实现简易的聊天室
简介
WebSocket简介
WebSocket 协议在2008年诞生，2011年成为国际标准。目前主流浏览器都有良好的支持。
WebSocket使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在WebSocket API中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。
WebSocket特点
- 建立在 TCP 协议之上，服务器端的实现比较容易
- 与 HTTP 协议有着良好的兼容性。默认端口也是80和443，并且握手阶段采用 HTTP 协议，因此握手时不容易屏蔽，能通过各种 HTTP 代理服务器
- 数据格式比较轻量，性能开销小，通信高效
- 可以发送文本，也可以发送二进制数据
- 没有同源限制，客户端可以与任意服务器通信
- 协议标识符是ws（如果加密，则为wss），服务器网址就是 URL。
整合实例
前期准备
1、pom.xml中添加依赖
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-websocket</artifactId>
</dependency>
<dependency>
<groupId>com.alibaba</groupId>
<artifactId>fastjson</artifactId>
<version>1.2.47</version>
</dependency>
<dependency>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
<optional>true</optional>
</dependency>
2、在SpringBoot配置文件中配置页面访问的端口
server:
port: 8888
3、创建WebSocket配置文件
@Configuration
public class WebSocketConfig {
@Bean
public ServerEndpointExporter serverEndpointExporter(){
return new ServerEndpointExporter();
}
}
自己给自己发消息
1、创建index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My WebSocket</title>
</head>
<body>
消息内容：<input id="text" type="text" />
<button onclick="send()">发送</button>
<button onclick="closeWebSocket()">关闭连接</button>
<div id="message"></div>
<script type="text/javascript">
var websocket=null;
if("WebSocket" in window){
websocket=new WebSocket("ws://localhost:8888/websocket/one");
}else {
alert('不支持WebSocket');
}
websocket.onerror=function () {
setMessageInnerHTML('websocket连接发生错误!');
};
websocket.onopen=function (event) {
setMessageInnerHTML('websocket连接建立成功!');
};
websocket.onmessage=function (event) {
var message=event.data;
setMessageInnerHTML(message);
};
websocket.onclose=function () {
setMessageInnerHTML('websocket连接关闭!');
};
websocket.onbeforeunload=function () {
websocket.close();
};
function setMessageInnerHTML(innerHTML) {
document.getElementById('message').innerHTML+=innerHTML+'<br/>';
}
function closeWebSocket() {
websocket.close();
}
function send(){
var message=document.getElementById('text').value;
websocket.send(message);
}
</script>
</body>
</html>
2、创建一个服务端，@ServerEndpoint注解是服务端与客户端交互的关键，其值(/websocket/one)要与index页面中的请求路径对应
@Slf4j
@ServerEndpoint(value = "/websocket/one")
@Component
public class OneWebSocket {
//当前在线连接数
private static AtomicInteger onlineCount=new AtomicInteger(0);
@OnOpen
public void onOpen(Session session){
onlineCount.incrementAndGet(); //在线数+1
log.info("增加连接：{},当前在线人数：{}",session.getId(),onlineCount.get());
}
@OnClose
public void onClose(Session session){
onlineCount.decrementAndGet(); //在线数-1
log.info("关闭连接：{},当前在线人数：{}",session.getId(),onlineCount.get());
}
@OnMessage
public void onMessage(String message,Session session){
log.info("服务端收到客户端【{}】的消息：{}",session.getId(),message);
sendMessage("Hello, "+message,session);
}
@OnError
public void one rror(Session session,Throwable error){
log.error("发送错误!");
error.printStackTrace();
}
private void sendMessage(String message,Session toSession){
try {
log.info("服务端给客户端【{}】发送消息{}",toSession.getId(),message);
toSession.getBasicRemote().sendText(message);
} catch (IOException e) {
log.error("服务端发送消息给客户端失败：{}",e);
}
}
}
3、访问index页面，进入页面时就会建立服务端与客户端的连接，在文本框中输入要发送的内容后，点击发送就能看到下面的效果了
群发消息
1、修改index.html的连接地址
websocket=new WebSocket("ws://localhost:8888/websocket/oneToMany");
2、创建服务端
@Slf4j
@ServerEndpoint(value = "/websocket/oneToMany")
@Component
public class OneToManyWebSocket {
//当前在线连接数
private static AtomicInteger onlineCount=new AtomicInteger(0);
//当前在线的客户端
private static Map<String, Session> clients=new ConcurrentHashMap<>();
@OnOpen
public void onOpen(Session session){
onlineCount.incrementAndGet(); //在线数+1
clients.put(session.getId(),session);
log.info("增加连接：{},当前在线人数：{}",session.getId(),onlineCount.get());
}
@OnClose
public void onClose(Session session){
onlineCount.decrementAndGet(); //在线数-1
clients.remove(session.getId());
log.info("关闭连接：{},当前在线人数：{}",session.getId(),onlineCount.get());
}
@OnMessage
public void onMessage(String message,Session session){
log.info("服务端收到客户端【{}】的消息：{}",session.getId(),message);
sendMessage("Hello, "+message,session);
}
@OnError
public void one rror(Session session,Throwable error){
log.error("发送错误!");
error.printStackTrace();
}
private void sendMessage(String message,Session fromSession){
for (Map.Entry<String,Session> sessionEntry:clients.entrySet()){
Session toSession=sessionEntry.getValue();
if (!fromSession.getId().equals(toSession.getId())){
log.info("服务端给客户端【{}】发送消息{}",toSession.getId(),message);
toSession.getAsyncRemote().sendText(message);
}
}
}
}
3、在浏览器中打开多个页面，选择一个页面发送消息
一对一聊天室
1、修改index.html页面代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My WebSocket</title>
</head>
<body>
<div>
ID:<span id="id"></span>
</div>
消息内容：<input id="text" type="text" />
目标ID：<input id="toId" type="text" />
<button onclick="send()">发送</button>
<button onclick="closeWebSocket()">关闭连接</button>
<div id="message"></div>
<script type="text/javascript">
var websocket=null;
if("WebSocket" in window){
websocket=new WebSocket("ws://localhost:8888/websocket/oneToOne");
}else {
alert('不支持WebSocket');
}
websocket.onerror=function () {
setMessageInnerHTML('websocket连接发生错误!');
};
websocket.onopen=function (event) {
setMessageInnerHTML('websocket连接建立成功!');
};
websocket.onmessage=function (event) {
var message=event.data;
if (message.length>11 && message.substring(0,12)=="send userId:"){
document.getElementById('id').innerText=message.substring(12,message.length);
}else{
setMessageInnerHTML(message);
}
};
websocket.onclose=function () {
setMessageInnerHTML('websocket连接关闭!');
};
websocket.onbeforeunload=function () {
websocket.close();
};
function setMessageInnerHTML(innerHTML) {
document.getElementById('message').innerHTML+=innerHTML+'<br/>';
}
function closeWebSocket() {
websocket.close();
}
function send(){
var id=document.getElementById('toId').value;
var message=document.getElementById('text').value;
var sendMsg="{\"userId\":"+id+",\"message\":\""+message+"\"}";
websocket.send(sendMsg);
}
</script>
</body>
</html>
2、创建服务端和MyMessage类
@Slf4j
@ServerEndpoint(value = "/websocket/oneToOne")
@Component
public class OneToOneWebSocket {
//当前在线连接数
private static AtomicInteger onlineCount=new AtomicInteger(0);
//当前在线的客户端
private static Map<String, Session> clients=new ConcurrentHashMap<>();
@OnOpen
public void onOpen(Session session){
onlineCount.incrementAndGet(); //在线数+1
clients.put(session.getId(),session);
log.info("增加连接：{},当前在线人数：{}",session.getId(),onlineCount.get());
sendMessage("send userId:"+session.getId(),session);
}
@OnClose
public void onClose(Session session){
onlineCount.decrementAndGet(); //在线数-1
clients.remove(session.getId());
log.info("关闭连接：{},当前在线人数：{}",session.getId(),onlineCount.get());
}
@OnMessage
public void onMessage(String message,Session session){
log.info("服务端收到客户端【{}】的消息：{}",session.getId(),message);
try{
MyMessage myMessage= JSON.parseObject(message, MyMessage.class);
if (myMessage!=null){
Session toSession=clients.get(myMessage.getUserId());
if (toSession!=null){
sendMessage(session.getId()+"："+myMessage.getMessage(),toSession);
}
sendMessage(session.getId()+"："+myMessage.getMessage(),session);
}
}catch (Exception e){
log.error("解析失败：{}",e);
}
}
@OnError
public void one rror(Session session,Throwable error){
log.error("发送错误!");
error.printStackTrace();
}
private void sendMessage(String message,Session toSession){
try {
log.info("服务端给客户端【{}】发送消息{}",toSession.getId(),message);
toSession.getBasicRemote().sendText(message);
} catch (Exception e) {
log.error("服务端发送消息给客户端失败：{}",e);
}
}
}
@Data
@NoArgsConstructor
public class MyMessage {
private String userId;
private String message;
}
3、浏览器中打开两个页面
标签：聊天室,websocket,SpringBoot,getId,session,WebSocket,message,public 来源： https://blog.csdn.net/nov4th/article/details/120510370
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。