基于 socketio 的 room 的使用

這里我們直接講解基于 springboot + vue 的 socketio 服務代碼，基于 socketio 我們可以使得服務端直接向客戶端進行消息的推送，而不再是只能客戶端請求服務端響應的模式，基于此 socketio 常常用于即時通訊，我們基于聊天的場景，使用其 room 來簡單介紹聊天項目的編寫。

1、導入jar

首先我們在后端導入jar

        <!-- socket.io服務端 --><dependency><groupId>com.corundumstudio.socketio</groupId><artifactId>netty-socketio</artifactId><version>1.7.7</version></dependency>

2、屬性配置

然后我們對其進行配置

首先是 yml 的配置

# netty-socketio 配置
socketio:host: 0.0.0.0port: 9999 # 端口號workCount: 100 # 工作線程數allowCustomRequests: true # 允許服務自定義請求與socket.io協議不同。upgradeTimeout: 10000 # 協議升級超時時間（毫秒），默認10秒。HTTP握手升級為ws協議超時時間pingTimeout: 60000 # Ping消息超時時間（毫秒），默認60秒，這個時間間隔內沒有接收到心跳消息就會發送超時事件pingInterval: 25000 # Ping消息間隔（毫秒），默認25秒。客戶端向服務器發送一條心跳消息間隔maxHttpContentLength: 1048576 # 設置http交互最大內容長度maxFramePayloadLength: 1048576 # 設置最大每幀處理數據的長度，防止他人利用大數據來攻擊服務器

然后是 java 的配置

package com.manster.server.config;import com.corundumstudio.socketio.SocketIOServer;
import com.corundumstudio.socketio.Transport;
import com.corundumstudio.socketio.annotation.SpringAnnotationScanner;
import lombok.extern.slf4j.Slf4j;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;/*** 配置 socketio* @Author manster* @Date 2022/6/13**/
@Slf4j
@Configuration
public class SocketIoConfig {/*** socketio 地址*/@Value("${socketio.host}")private String host;/*** socketio 端口*/@Value("${socketio.port}")private Integer port;/*** 工作線程*/@Value("${socketio.workCount}")private int workCount;/*** 允許服務自定義請求與socket.io協議不同。*/@Value("${socketio.allowCustomRequests}")private boolean allowCustomRequests;/*** 協議升級超時時間（毫秒），默認10秒。HTTP握手升級為ws協議超時時間*/@Value("${socketio.upgradeTimeout}")private int upgradeTimeout;/**** Ping消息超時時間（毫秒），默認60秒，這個時間間隔內沒有接收到心跳消息就會發送超時事件*/@Value("${socketio.pingTimeout}")private int pingTimeout;/*** Ping消息間隔（毫秒），默認25秒?？蛻舳讼蚍掌靼l送一條心跳消息間隔*/@Value("${socketio.pingInterval}")private int pingInterval;@Value("${socketio.maxFramePayloadLength}")private int maxFramePayloadLength;@Value("${socketio.maxHttpContentLength}")private int maxHttpContentLength;@Bean("socketIOServer")public SocketIOServer socketIOServer() {com.corundumstudio.socketio.Configuration config = new com.corundumstudio.socketio.Configuration();config.setHostname(host);config.setPort(port);com.corundumstudio.socketio.SocketConfig socketConfig = new com.corundumstudio.socketio.SocketConfig();socketConfig.setReuseAddress(true);config.setSocketConfig(socketConfig);config.setWorkerThreads(workCount);config.setAllowCustomRequests(allowCustomRequests);config.setUpgradeTimeout(upgradeTimeout);config.setPingTimeout(pingTimeout);config.setPingInterval(pingInterval);config.setMaxHttpContentLength(maxHttpContentLength);config.setMaxFramePayloadLength(maxFramePayloadLength);config.setTransports(Transport.WEBSOCKET);//指定傳輸協議為WebSocketreturn new SocketIOServer(config);}/*** 注冊socket-io 注解* 開啟SocketIOServer注解支持，比如 @OnConnect、@OnEvent* @param socketServer socketIo 服務* @return*/@Beanpublic SpringAnnotationScanner springAnnotationScanner(SocketIOServer socketServer) {return new SpringAnnotationScanner(socketServer);}}

3、配置監聽器

首先是初始化的監聽器

package com.manster.server.listen;import com.corundumstudio.socketio.SocketIOServer;
import lombok.extern.slf4j.Slf4j;
import org.springframework.boot.context.event.ApplicationReadyEvent;
import org.springframework.context.ApplicationListener;
import org.springframework.stereotype.Component;/*** 項目啟動成功后，啟動socket-io 服務* @Author manster* @Date 2022/6/13**/
@Slf4j
@Component
public class SocketIoInitListener implements ApplicationListener<ApplicationReadyEvent> {private final SocketIOServer server;public SocketIoInitListener(SocketIOServer server) {this.server = server;}@Overridepublic void onApplicationEvent(ApplicationReadyEvent applicationReadyEvent) {server.start();log.info("--------------------------------------");log.info("socket.io啟動成功: " + server.getConfiguration().getPort());log.info("--------------------------------------");}
}

然后是關閉時的監聽器

package com.manster.server.listen;import com.corundumstudio.socketio.SocketIOServer;
import lombok.extern.slf4j.Slf4j;
import org.springframework.context.ApplicationListener;
import org.springframework.context.event.ContextClosedEvent;
import org.springframework.stereotype.Component;/*** 項目關閉后，關閉socket-io 服務* @Author manster* @Date 2022/6/13**/
@Slf4j
@Component
public class SocketIoStopListener implements ApplicationListener<ContextClosedEvent> {private final SocketIOServer server;public SocketIoStopListener(SocketIOServer server) {this.server = server;}// 監聽kill pid     無法監聽 kill -9 pid@Overridepublic void onApplicationEvent(ContextClosedEvent contextClosedEvent) {server.stop();log.info("--------------------------------------");log.info("socket.io 關閉成功");log.info("--------------------------------------");}
}

4、socketio 服務

配置 socketio 的消息服務

核心代碼

package com.manster.server.handler;import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
import com.corundumstudio.socketio.SocketIOClient;
import com.corundumstudio.socketio.SocketIOServer;
import com.corundumstudio.socketio.annotation.OnConnect;
import com.corundumstudio.socketio.annotation.OnDisconnect;
import com.corundumstudio.socketio.annotation.OnEvent;
import lombok.extern.slf4j.Slf4j;
import org.springframework.stereotype.Component;import javax.annotation.Resource;
import java.util.*;/*** @Author manster* @Date 2022/6/13**/
@Slf4j
@Component
public class SocketIOHandler {@Resourceprivate SocketIOServer socketIOServer;//socket添加@OnDisconnect事件，客戶端斷開連接時調用，刷新客戶端信息@OnDisconnectpublic void onDisconnect(SocketIOClient client) {}//socket添加connect事件，當客戶端發起連接時調用@OnConnectpublic void onConnect(SocketIOClient client) {}//接收到新的消息對消息類型所屬的會話進行判斷@OnEvent("sendNewMessage")public void sendNewMessage(SocketIOClient client, NewMessageVo newMessageVo) }}

我的服務，我這里是基于 socketio 中 room 來進行會話的，私聊就是兩人一個房間（房間號為兩人1-2，兩人id相連接），群聊就以群聊id為房間號，聊天前需要先是客戶端加入房間

package com.manster.server.handler;import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
import com.corundumstudio.socketio.SocketIOClient;
import com.corundumstudio.socketio.SocketIOServer;
import com.corundumstudio.socketio.annotation.OnConnect;
import com.corundumstudio.socketio.annotation.OnDisconnect;
import com.corundumstudio.socketio.annotation.OnEvent;
import com.manster.server.common.ConstValueEnum;
import com.manster.server.entity.GroupMessage;
import com.manster.server.entity.SingleMessage;
import com.manster.server.entity.User;
import com.manster.server.service.GroupMessageService;
import com.manster.server.service.OnlineUserService;
import com.manster.server.service.SingleMessageService;
import com.manster.server.vo.CurrentConversationVo;
import com.manster.server.vo.NewMessageVo;
import com.manster.server.vo.SimpleUser;
import lombok.extern.slf4j.Slf4j;
import org.springframework.beans.BeanUtils;
import org.springframework.stereotype.Component;import javax.annotation.Resource;
import java.util.*;/*** @Author manster* @Date 2022/6/13**/
@Slf4j
@Component
public class SocketIOHandler {@Resourceprivate SocketIOServer socketIOServer;@Resourceprivate SingleMessageService singleMessageService;@Resourceprivate OnlineUserService onlineUserService;@Resourceprivate GroupMessageService groupMessageService;/*** map：clientId -> uid（用戶判斷用戶上下線）* map：uid -> simpleUser（用于查詢是否已經登錄）*///socket添加@OnDisconnect事件，客戶端斷開連接時調用，刷新客戶端信息@OnDisconnectpublic void onDisconnect(SocketIOClient client) {Map<String, List<String>> urlParams = client.getHandshakeData().getUrlParams();log.info("--------------------客戶端已斷開連接--------------------{}", urlParams);//清除用戶登錄信息cleanLoginInfo(client.getSessionId().toString());socketIOServer.getBroadcastOperations().sendEvent("onlineUser", onlineUserService.getOnlineUidSet());}//socket添加connect事件，當客戶端發起連接時調用@OnConnectpublic void onConnect(SocketIOClient client) {Map<String, List<String>> urlParams = client.getHandshakeData().getUrlParams();log.info("鏈接開啟，urlParams：{}", urlParams);}//用戶上線了@OnEvent("goOnline")public void goOnline(SocketIOClient client, User user) {log.info("goOnline ---> user：{}", user);String clientId = client.getSessionId().toString();SimpleUser simpleUser = new SimpleUser();BeanUtils.copyProperties(user, simpleUser);onlineUserService.addClientIdToSimpleUser(clientId, simpleUser);//廣播所有在線用戶socketIOServer.getBroadcastOperations().sendEvent("onlineUser", onlineUserService.getOnlineUidSet());}//用戶下線了@OnEvent("leave")public void leave(SocketIOClient client) {log.info("leave ---> client：{}", client);//清除用戶登錄信息cleanLoginInfo(client.getSessionId().toString());//廣播所有在線用戶socketIOServer.getBroadcastOperations().sendEvent("onlineUser", onlineUserService.getOnlineUidSet());}// 清除用戶登錄信息private void cleanLoginInfo(String clientId) {SimpleUser simpleUser = onlineUserService.getSimpleUserByClientId(clientId);if (simpleUser != null) {onlineUserService.removeClientAndUidInSet(clientId, simpleUser.getId());}}//接收到新的消息對消息類型所屬的會話進行判斷@OnEvent("sendNewMessage")public void sendNewMessage(SocketIOClient client, NewMessageVo newMessageVo) {log.info("sendNewMessage ---> newMessageVo：{}", newMessageVo);if (Objects.equals(newMessageVo.getConversationType(), ConstValueEnum.SINGLE)) {SingleMessage singleMessage = new SingleMessage();BeanUtils.copyProperties(newMessageVo, singleMessage);singleMessage.setSenderId(newMessageVo.getSenderId());//插入數據庫singleMessageService.save(singleMessage);} else if (Objects.equals(newMessageVo.getConversationType(), ConstValueEnum.GROUP)) {GroupMessage groupMessage = new GroupMessage();BeanUtils.copyProperties(newMessageVo, groupMessage);groupMessage.setSenderId(newMessageVo.getSenderId());//插入數據庫groupMessageService.save(groupMessage);}//通知該房間收到消息接受到消息Collection<SocketIOClient> clients = socketIOServer.getRoomOperations(newMessageVo.getRoomId()).getClients(); //實際上同一房間只有2個客戶端for (SocketIOClient item : clients) {if (item != client) {item.sendEvent("receiveMessage", newMessageVo);if(singleMessageService.count(new QueryWrapper<SingleMessage>().eq("room_id", newMessageVo.getRoomId())) == 1){item.sendEvent("newConversation", newMessageVo);log.info("加入會話");}}}}@OnEvent("join")public void join(SocketIOClient client, CurrentConversationVo conversationVo) {log.info("加入房間號碼：{} ---> conversationVo：{}", conversationVo.getRoomId(), conversationVo);//當前登錄的客戶端加入到指定房間client.joinRoom(conversationVo.getRoomId());}}

5、前端

下載包

npm install vue-socket.io@3.0.10

main.js配置

import VueSocketIO from 'vue-socket.io'Vue.use(new VueSocketIO({debug: true,connection: 'http://localhost:9999'
}))

在登錄后我們進行客戶端的連接

  sockets: {// 客戶端connect事件，服務端可針對connect進行信息傳輸connect: function () {this.$message.info('連接成功')console.log('socket connected：', this.$socket.id)},onlineUser (data) {// console.log('當前在線用戶列表：', data)this.$store.dispatch('user/SET_ONLINE_USER', data)}},

• 發送消息，我們直接采用 this.$socket.emit('sendNewMessage', newMessage)，sendNewMessage 為后端接口中 @OnEvent("sendNewMessage") 相對應
• 接收消息，我們在 vue 的 sockets 鉤子中，編寫相對應后端發送的 item.sendEvent("newConversation", newMessageVo); 方法，并對應進行數據的接受

然后我們進行消息的發送

    send (e) {e.preventDefault()if (!this.messageText) {return}const common = this.generatorMessageCommon()const newMessage = {...common,message: this.messageText,messageType: 0}this.messages = [...this.messages, newMessage]this.$socket.emit('sendNewMessage', newMessage)this.messageText = ''this.showEmojiCom = false// 發完消息更新自己會話列表的最新消息this.$store.dispatch('conversation/SET_UNREAD_NUM', {type: 'clear', data: newMessage})},

接受消息

  sockets: {receiveMessage (news) {// 收到消息if (news.roomId === this.currentConversation.roomId) {// 是自己正所處的房間就添加消息并更新會話列表this.messages = [...this.messages, news]// 進來設置該房間未讀消息數為0setTimeout(() => {this.$store.dispatch('conversation/SET_UNREAD_NUM', {type: 'clear', data: news})}, 0)} else {// 不是現在所處的房間就新增未讀消息this.$store.dispatch('conversation/SET_UNREAD_NUM', {type: 'add', data: news})}}},

總結

以上是生活随笔為你收集整理的基于 socketio 的 room 的使用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。