引入的java包

<!--        以下是即時通訊--><!-- Netty core modules  --><dependency><groupId>io.netty</groupId><artifactId>netty-all</artifactId><version>4.1.76.Final</version> <!-- 使用最新的穩定版本 --></dependency><!-- Optional: Support for WebSocket --><dependency><groupId>io.netty</groupId><artifactId>netty-handler-proxy</artifactId><version>4.1.76.Final</version></dependency><!-- Optional: Support for HTTP/2 --><dependency><groupId>io.netty</groupId><artifactId>netty-resolver-dns-native-macos</artifactId><version>4.1.76.Final</version><classifier>osx-x86_64</classifier><optional>true</optional></dependency>

2.創建project對象(這個對象是跟業務相關的,如果業務簡單,不創建也可以,最后傳輸的都是字符串)

@Getter
@Setter
public class Project {private GroupStudentService groupStudentService;private Integer schoolId;  //學校idprivate Integer projectId;  //項目idprivate Integer leafId;  //小節idprivate Integer leafTypeId;  //小節類型private Integer chapterId;  //章節idprivate Object currentLeaf;//當前小節private  Integer currentLeafIndex;//當前小節的下標private  Integer currentChapterIndex;//當前章節的下標public Project(Integer projectId,Integer leafId,Integer leafTypeId,Integer chapterId,Object currentLeaf,Integer currentLeafIndex,Integer currentChapterIndex,Integer schoolId) {this.projectId = projectId;this.leafId = leafId;this.leafTypeId = leafTypeId;this.chapterId = chapterId;this.currentLeaf = currentLeaf;this.currentLeafIndex = currentLeafIndex;this.currentChapterIndex = currentChapterIndex;this.schoolId= schoolId;}public Project() {}

3.創建WebsocketHandler

public class WebsocketHandler extends SimpleChannelInboundHandler<TextWebSocketFrame> {// 定義一個全局變量用來保存所有連接的客戶端Channelprivate static final Set<Channel> connectedChannels = Collections.newSetFromMap(new ConcurrentHashMap<>());// 當有新的連接時，將Channel添加到集合中public void handlerAdded(ChannelHandlerContext ctx) {connectedChannels.add(ctx.channel());}// 當連接關閉時，從集合中移除該Channelpublic void handlerRemoved(ChannelHandlerContext ctx) {connectedChannels.remove(ctx.channel());}@Overrideprotected void channelRead0(ChannelHandlerContext ctx, TextWebSocketFrame msg) {String text = msg.text();String prefix = text.substring(0, 7); //截取前綴if (prefix.contains("switch")) {//當前數據是切換小節handleSwitch(text.substring(7));} else if (prefix.contains("xsData")) {//當前數據是學生提交作業給老師的handleStudentData(text.substring(7));}}//這個是專門用來切換小節的,老師切換上一節,下一節,跳到指定小節,學生的大屏頁面也跟著切換private void handleSwitch(String parts) {//把parts轉成jsonobject對象JSONObject jsonObject = JSON.parseObject(parts);Integer projectId = (int) jsonObject.get("projectId");Integer leafId = (int) jsonObject.get("leafId");Integer leafTypeId = (int) jsonObject.get("leafTypeId");Integer chapterId = (int) jsonObject.get("chapterId");Integer currentLeafIndex = (int) jsonObject.get("currentLeafIndex");Integer currentChapterIndex = (int) jsonObject.get("currentChapterIndex");Object currentLeaf = jsonObject.get("currentLeaf");Integer schoolId = (int) jsonObject.get("institutionId");Project project = new Project(projectId,leafId,leafTypeId,chapterId,currentLeaf,currentLeafIndex,currentChapterIndex, schoolId);Gson gson = new Gson();String jsonProject = gson.toJson(project);if (project != null) {for (Channel channel : connectedChannels) {if (channel.isActive()) { // 檢查通道是否仍然活躍channel.writeAndFlush(new TextWebSocketFrame("switch:" + jsonProject));}}}}//這個是專門用來學生提交數據的,學生提交數據,老師大屏上能展示數據private void handleStudentData(String parts) {//把parts轉成jsonobject對象JSONObject jsonObject = JSON.parseObject(parts);Integer projectId =Integer.valueOf(jsonObject.get("projectId").toString());Integer leafId = Integer.valueOf(jsonObject.get("leafId").toString());Integer schoolId = Integer.valueOf( jsonObject.get("institutionId").toString());Project project = new Project();project.setProjectId(projectId);project.setSchoolId(schoolId);project.setLeafId(leafId);Gson gson = new Gson();String jsonProject = gson.toJson(project);if (project != null) {for (Channel channel : connectedChannels) {if (channel.isActive()) { // 檢查通道是否仍然活躍channel.writeAndFlush(new TextWebSocketFrame("xsData:" + jsonProject));}}}}

4.創建WebsocketServer啟動類

public class WebsocketServer {public static void main(String[] args) throws InterruptedException {initWebsocket();}public static void initWebsocket() throws InterruptedException {EventLoopGroup bossGroup = new NioEventLoopGroup();EventLoopGroup workerGroup = new NioEventLoopGroup();try {ServerBootstrap b = new ServerBootstrap();b.group(bossGroup, workerGroup).channel(NioServerSocketChannel.class).childHandler(new ChannelInitializer<SocketChannel>() {@Overrideprotected void initChannel(SocketChannel ch) {System.out.println("初始化WebsocketServer");ChannelPipeline p = ch.pipeline();p.addLast(new HttpServerCodec());p.addLast(new HttpObjectAggregator(65536));p.addLast(new ChunkedWriteHandler());p.addLast(new WebSocketServerProtocolHandler("/screen"));p.addLast(new WebsocketHandler());}});ChannelFuture f = b.bind(8084).sync();f.channel().closeFuture().sync();} finally {workerGroup.shutdownGracefully();bossGroup.shutdownGracefully();}}}

5.頁面上的發送數據

connectWebSocket() {this.socket = new WebSocket('ws://' + window.location.hostname + ':8084/screen');this.socket.addEventListener('open', (event) => {console.log('WebSocket connection opened--學生');});this.socket.addEventListener('message', (event) => {console.log(event);});this.socket.addEventListener('error', (event) => {console.error('WebSocket error:', event);});this.socket.addEventListener('close', (event) => {console.log('WebSocket connection closed');});}

///--------------------------------------------------這是scoketlet sendData = {projectId: this.projectId,leafId: this.leafId,institutionId: JSON.parse(localStorage.getItem('user')).institutionId};console.log(sendData)// 將數據對象轉化為JSON字符串let jsonData = JSON.stringify(sendData);let prefixedData = 'xsData:' + jsonData;this.socket.send(prefixedData);///----------------------------------------------------------------

6.頁面上接收數據

initWebSocket() {this.socket = new WebSocket(`ws://${window.location.hostname}:8084/screen`);this.socket.addEventListener('open', (event) => {console.log('WebSocket connection opened');});this.socket.addEventListener('message', (event) => {const data = event.data;if (data.startsWith('xsData:')) {const jsonData = data.substring(7);const vo = JSON.parse(jsonData);if (vo.schoolId == JSON.parse(localStorage.getItem('user')).institutionId &&vo.projectId == this.projectId && vo.leafId == this.leafId) {this.getQd();} else {console.log("無效信息")}}});this.socket.addEventListener('error', (event) => {console.error('WebSocket error:', event);});this.socket.addEventListener('close', (event) => {console.log('WebSocket connection closed');});},