前后端分离项目React，SpringBoot 集成Socket.IO
npm install socket.io-client@2.4.0
在需要监听的主组件设置监听，如（ProjectList_BU.js）
import io from 'socket.io-client'
componentDidMount() {
this.connect(sessionStorage.getItem("UserName")) //标识ID用以区分 后台启动前端指定user的方法
}
connect(uid) {
var that = this
var socket = io.connect("http://127.0.0.1:10246",{ //后端设置好的固定端口号
'force new connection': true,
'query': 'UID=' + uid
});
socket.on('connect', function () {
console.log("Socket连接成功");
// 向后端传递对象数组
// socket.emit("ServerReceive", {
// name: "client",
// message: "hello Server"
// });
});
socket.on("ClientReceive", function (data) { //后端通过 “ClientReceive” 将数据传递到指定user的前端
console.log(data);
if(data.type=='JCPersonUpdate') {
that.GetData() //启动相应方法，需要用that指针
}
});
socket.on('disconnect', function () {
console.log("Socket连接断开");
});
}
import com.corundumstudio.socketio.SocketConfig;
import com.corundumstudio.socketio.SocketIOServer;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
@Configuration
public class SocketIOConfig
{
@Value("${socketio.host}")
private String host;
@Value("${socketio.port}")
private Integer port;
@Value("${socketio.bossCount}")
private int bossCount;
@Value("${socketio.workCount}")
private int workCount;
@Value("${socketio.allowCustomRequests}")
private boolean allowCustomRequests;
@Value("${socketio.upgradeTimeout}")
private int upgradeTimeout;
@Value("${socketio.pingTimeout}")
private int pingTimeout;
@Value("${socketio.pingInterval}")
private int pingInterval;
/**
* 以下配置在上面的application.properties中已经注明
*
* @return
*/
@Bean
public SocketIOServer socketIOServer()
{
SocketConfig socketConfig = new SocketConfig();
socketConfig.setTcpNoDelay(true);
socketConfig.setSoLinger(0);
com.corundumstudio.socketio.Configuration config = new com.corundumstudio.socketio.Configuration();
config.setSocketConfig(socketConfig);
config.setHostname(host);
config.setPort(port);
config.setBossThreads(bossCount);
config.setWorkerThreads(workCount);
config.setAllowCustomRequests(allowCustomRequests);
config.setUpgradeTimeout(upgradeTimeout);
config.setPingTimeout(pingTimeout);
config.setPingInterval(pingInterval);
return new SocketIOServer(config);
}
}
socketio:
host: 127.0.0.1 #监听的ip
port: 10246 #监听端口
# 设置最大每帧处理数据的长度，防止他人利用大数据来攻击服务器
maxFramePayloadLength: 1048576
# 设置http交互最大内容长度
maxHttpContentLength: 1048576
# socket连接数大小（如只监听一个端口boss线程组为1即可）
bossCount: 1
workCount: 100
allowCustomRequests: true
# 协议升级超时时间（毫秒），默认10秒。HTTP握手升级为ws协议超时时间
upgradeTimeout: 1000000
# Ping消息超时时间（毫秒），默认60秒，这个时间间隔内没有接收到心跳消息就会发送超时事件
pingTimeout: 6000000
# Ping消息间隔（毫秒），默认25秒。客户端向服务器发送一条心跳消息间隔
pingInterval: 25000
import com.alibaba.fastjson.JSONObject;
import com.corundumstudio.socketio.SocketIOClient;
import com.corundumstudio.socketio.SocketIOServer;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import javax.annotation.PostConstruct;
import javax.annotation.PreDestroy;
import java.util.List;
import java.util.Map;
import java.util.concurrent.ConcurrentHashMap;
@Service
public class SocketIoService
{
private final Logger log = LoggerFactory.getLogger(this.getClass());
// 用来存已连接的客户端
public static Map<String, SocketIOClient> clientMap = new ConcurrentHashMap<>();
@Autowired
private SocketIOServer socketIOServer;
/**
* Spring IoC容器创建之后，在加载SocketIOServiceImpl Bean之后启动
*
* @throws Exception
*/
@PostConstruct
private void autoStartup() throws Exception
{
start();
}
/**
* Spring IoC容器在销毁SocketIOServiceImpl Bean之前关闭,避免重启项目服务端口占用问题
*
* @throws Exception
*/
@PreDestroy
private void autoStop() throws Exception
{
stop();
}
public void start()
{
// 监听客户端连接
socketIOServer.addConnectListener(client -> {
String uid = getParamsByClient(client);
if (uid != null)
{
clientMap.put(uid, client);
log.info("有新的客户端连接UID:{}", uid);
}
// 给客户端发送一条信息 发送ClientReceive事件 需要客户端绑定此事件即可接收到消息
// JSONObject jsonObject = new JSONObject();
// jsonObject.put("name", "goat");
// jsonObject.put("message", "hello client");
// client.sendEvent("ClientReceive", jsonObject);
});
// 监听客户端断开连接
socketIOServer.addDisconnectListener(listener -> {
String uid = getParamsByClient(listener);
if (uid != null)
{
clientMap.remove(uid);
listener.disconnect();
log.info("一条客户端连接中断");
}
});
socketIOServer.addEventListener("ServerReceive", JSONObject.class, (client, data, ackSender) -> {
String uid = getParamsByClient(client);
String ip = getIpByClient(client);
if (uid != null)
{
log.info("接收到SID:{}发来的消息:{}", uid, data.toJSONString());
log.debug(ip + " ************ 客户端：" + data);
}
});
socketIOServer.start();
log.info("socket.io初始化服务完成");
}
public void stop()
{
if (socketIOServer != null)
{
socketIOServer.stop();
socketIOServer = null;
}
log.info("socket.io服务已关闭");
}
/**
* 此方法为获取client连接中的参数，可根据需求更改
*
* @param client
* @return
*/
private String getParamsByClient(SocketIOClient client)
{
// 从请求的连接中拿出参数（这里的sid必须是唯一标识）
Map<String, List<String>> params = client.getHandshakeData().getUrlParams();
List<String> list = params.get("UID");
if (list != null && list.size() > 0)
{
return list.get(0);
}
return null;
}
/**
* 获取连接的客户端ip地址
*
* @param client: 客户端
* @return: java.lang.String
*/
private String getIpByClient(SocketIOClient client)
{
String sa = client.getRemoteAddress().toString();
return sa.substring(1, sa.indexOf(":"));
}
}
@CrossOrigin(origins = "*",maxAge = 3600)
@Controller
public class ProjectManager_BU_V2 {
@Autowired
private SocketIOServer socketIOServer;
public void test() {
//向前端username= SubmitUser 的用户发送json数据
SocketIOClient client = SocketIoService.clientMap.get(SubmitUser);
com.alibaba.fastjson.JSONObject jsonObject = new com.alibaba.fastjson.JSONObject();
jsonObject.put("type", "JCPersonUpdate");
client.sendEvent("ClientReceive", jsonObject);
}
}