springboot + websocket做的简单聊天工具 (附源码)
关于websocket的概念还有和http的关系这里就不做太多的解释了,这里我抽取到最精简的代码,让我们一些刚开始学习websocket的同学能看到效果易于学习,如果大家觉得有用欢迎转载和收藏,github可以star一下给个支持。
1. 先上源码地址: github 简单聊天工具 (im分支)
2. demo地址:点击查看效果
一、使用技术
1. 后端:springboot提供的ws(websocket)服务
ps:注意,下面的代码不是完整代码,完整代码可以到 github下载
- 引入
springboot
所需要的websocket
的jar
包
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-websocket</artifactId>
</dependency>
- 创建
websocket
服务
package com.coco.demo.socketdemo.service;
import lombok.extern.slf4j.Slf4j;
import org.springframework.stereotype.Component;
import javax.websocket.OnClose;
import javax.websocket.OnMessage;
import javax.websocket.OnOpen;
import javax.websocket.Session;
import javax.websocket.server.ServerEndpoint;
import java.io.IOException;
import java.util.HashMap;
import java.util.Map;
import java.util.concurrent.CopyOnWriteArraySet;
/**
* @author wangzz
* 下面这个@ServerEndpoint("/webSocket") 提供的是ws的服务url
* 完整url为:ws://域名或ip:port/webSocket //js创建websocket对象需要使用
*/
@Slf4j
@Component
@ServerEndpoint("/webSocket")
public class WebSocket {
private Session session;
private static CopyOnWriteArraySet<WebSocket> webSocketSet = new CopyOnWriteArraySet<WebSocket>();
private static Map<String, Object> namesMap = new HashMap<>();
@OnOpen
public void onOpen(Session session) {
this.session = session;
webSocketSet.add(this);
log.error("新的连接,连接总数:{}", webSocketSet.size());
}
@OnClose
public void onClose() {
webSocketSet.remove(this);
log.error("连接断开,连接总数:{}", webSocketSet.size());
}
@OnMessage
public void onMessage(String message) {
log.error("收到客户端:{},发来的消息:{}", namesMap.get(session.getId()), message);
}
public void sendMessage(String message) {
for (WebSocket webSocket : webSocketSet) {
log.error("广播消息,message={}", message);
try {
webSocket.session.getBasicRemote().sendText(message);
} catch (Exception e) {
e.printStackTrace();
}
}
}
}
2. 前端:普通的html页面
<!DOCTYPE html>
<html>
<head>
<title>简单的聊天工具</title>
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<script type="text/javascript">
var websocket = null;
if ('WebSocket' in window) {
websocket = new WebSocket('ws://www.coco-z.com:9000/webSocket');
} else {
alert('该浏览器不支持websocket');
}
websocket.onopen = function (ev) {
console.log('建立连接');
};
websocket.onclose = function (ev) {
console.log('连接关闭');
};
websocket.onmessage = function (ev) {
console.log('收到消息:' + ev.data);
alert('收到消息:' + ev.data);
};
window.onbeforeunload = function (ev) {
websocket.close();
};
function sendMsg() {
var msgNode = document.getElementById("msg");
var msg = msgNode.value;
if (msg) {
websocket.send(msg);
}
msgNode.value = '';
}
</script>
<body>
<h1>简单的聊天</h1>
<button onclick="sendMsg()">发送消息</button>
<textarea type="text" id="msg" name="msg"></textarea>
<hr />
</body>
</html>