一、后端
参考https://www.jianshu.com/p/c67853e729e2
1、引入依赖
<dependency> <groupId>com.corundumstudio.socketio</groupId> <artifactId>netty-socketio</artifactId> <version>1.7.7</version> </dependency>
2、application.properties相关配置
# host在本地测试可以设置为localhost或者本机IP,在Linux服务器跑可换成服务器IP socketio.host=localhost socketio.port=9099 # 设置最大每帧处理数据的长度,防止他人利用大数据来攻击服务器 socketio.maxFramePayloadLength=1048576 # 设置http交互最大内容长度 socketio.maxHttpContentLength=1048576 # socket连接数大小(如只监听一个端口boss线程组为1即可) socketio.bossCount=1 socketio.workCount=100 socketio.allowCustomRequests=true # 协议升级超时时间(毫秒),默认10秒。HTTP握手升级为ws协议超时时间 socketio.upgradeTimeout=1000000 # Ping消息超时时间(毫秒),默认60秒,这个时间间隔内没有接收到心跳消息就会发送超时事件 socketio.pingTimeout=6000000 # Ping消息间隔(毫秒),默认25秒。客户端向服务器发送一条心跳消息间隔 socketio.pingInterval=25000
3、SocketIOConfig.java配置文件相关配置
1 import com.corundumstudio.socketio.SocketConfig; 2 import org.springframework.beans.factory.annotation.Value; 3 import org.springframework.context.annotation.Bean; 4 import org.springframework.context.annotation.Configuration; 5 6 import com.corundumstudio.socketio.SocketIOServer; 7 8 @Configuration 9 public class SocketIOConfig { 10 11 @Value("${socketio.host}") 12 private String host; 13 14 @Value("${socketio.port}") 15 private Integer port; 16 17 @Value("${socketio.bossCount}") 18 private int bossCount; 19 20 @Value("${socketio.workCount}") 21 private int workCount; 22 23 @Value("${socketio.allowCustomRequests}") 24 private boolean allowCustomRequests; 25 26 @Value("${socketio.upgradeTimeout}") 27 private int upgradeTimeout; 28 29 @Value("${socketio.pingTimeout}") 30 private int pingTimeout; 31 32 @Value("${socketio.pingInterval}") 33 private int pingInterval; 34 35 /** 36 * 以下配置在上面的application.properties中已经注明 37 * @return 38 */ 39 @Bean 40 public SocketIOServer socketIOServer() { 41 SocketConfig socketConfig = new SocketConfig(); 42 socketConfig.setTcpNoDelay(true); 43 socketConfig.setSoLinger(0); 44 com.corundumstudio.socketio.Configuration config = new com.corundumstudio.socketio.Configuration(); 45 config.setSocketConfig(socketConfig); 46 config.setHostname(host); 47 config.setPort(port); 48 config.setBossThreads(bossCount); 49 config.setWorkerThreads(workCount); 50 config.setAllowCustomRequests(allowCustomRequests); 51 config.setUpgradeTimeout(upgradeTimeout); 52 config.setPingTimeout(pingTimeout); 53 config.setPingInterval(pingInterval); 54 return new SocketIOServer(config); 55 } 56 }
四、提供SocketIOService接口
public interface SocketIOService { // 启动服务 void start() throws Exception; // 停止服务 void stop(); }
五、具体实现方法
import java.util.List; import java.util.Map; import java.util.concurrent.ConcurrentHashMap; import javax.annotation.PostConstruct; import javax.annotation.PreDestroy; import org.apache.commons.lang3.StringUtils; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Service; import com.corundumstudio.socketio.SocketIOClient; import com.corundumstudio.socketio.SocketIOServer; @Service(value = "socketIOService") public class SocketIOServiceImpl implements SocketIOService { // 用来存已连接的客户端 private 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(); } @Override public void start() { // 监听客户端连接 socketIOServer.addConnectListener(client -> { String loginUserNum = getParamsByClient(client); if (loginUserNum != null) { clientMap.put(loginUserNum, client); } }); // 监听客户端断开连接 socketIOServer.addDisconnectListener(client -> { String loginUserNum = getParamsByClient(client); if (loginUserNum != null) { clientMap.remove(loginUserNum); client.disconnect(); } }); // 处理自定义的事件,与连接监听类似,event为事件名,PushMessage为参数实体类
// 监听前端发送的事件 socketIOServer.addEventListener("event", PushMessage.class, (client, data, ackSender) -> { // TODO do something }); socketIOServer.start(); } @Override public void stop() { if (socketIOServer != null) { socketIOServer.stop(); socketIOServer = null; } } public void pushMessageToUser(PushMessage pushMessage) { String loginUserNum = pushMessage.getLoginUserNum(); if (StringUtils.isNotBlank(loginUserNum)) { SocketIOClient client = clientMap.get(loginUserNum); if (client != null)
// 通过sendEvent给前端发送事件,并传递参数 client.sendEvent(PUSH_EVENT, pushMessage); } } /** * 此方法为获取client连接中的参数,可根据需求更改 * @param client * @return */ private String getParamsByClient(SocketIOClient client) { // 从请求的连接中拿出参数(这里的loginUserNum必须是唯一标识) Map<String, List<String>> params = client.getHandshakeData().getUrlParams(); List<String> list = params.get("loginUserNum"); if (list != null && list.size() > 0) { return list.get(0); } return null; } }
二、前端
1、下载
npm install socket.io-client
2、引入
import io from ‘socket.io-client‘;
3、监听连接、自定义事件、退出
mounted { // 连接参数 let opts = new Object(); // 连接scoket服务器,ip为socket地址 var socket = io(‘ip‘, opts); // 监听连接后的回调 socket.on(‘connect‘, function(){}); // 监听自定义事件,event为事件名,并接受后台传过来的参数 socket.on(‘event‘, function(data){}); // 监听退出后的回调函数 socket.on(‘disconnect‘, function(){}); }
4、发送事件
// event为事件名,data为参数 socket.emit(‘event‘, data);
三、总结
1、前端可以通过socket.on来监听,socket.emit来发送事件。
2、后端可以通过SocketIOClient的sendEvent发送事件,socketIOServer.addDisconnectListener来监听。