jFinal下WebSocket的使用

1.引入jar包

maven方式

		<!-- https://mvnrepository.com/artifact/io.undertow/undertow-websockets-jsr -->
		<dependency>
			<groupId>io.undertow</groupId>
			<artifactId>undertow-websockets-jsr</artifactId>
			<version>2.2.2.Final</version>
		</dependency>

直接下载
下载链接

2.修改启动方式

之前的启动方式可能是这样

UndertowServer.start(DemoConfig.class);

这是使用UndertowServer时的启动,之前版本的不太记得了
现在需要修改成这样

UndertowServer.create(DemoConfig.class).configWeb(builder -> {
builder.addWebSocketEndpoint("com.demo.socket.MWebSocket");
}).start();

其中com.demo.socket.MyWebSocket这是需要自己去实现的一个socket类,以处理与客户端的交互

3.编写socket类

package com.mmmushroom.socket;

import javax.websocket.OnClose;
import javax.websocket.OnMessage;
import javax.websocket.Session;
import javax.websocket.server.ServerEndpoint;
//这里用来标注这是websocket类
@ServerEndpoint("/mysocket.ws")
public class MWebSocket {
	//这里用来接收客户端发送的消息
	@OnMessage
	public void message(String message, Session session) {
		
	}
	//当连接关闭时会调用这个方法
	@OnClose
	public void close(Session session) {
	}
	//当连接建立时会调用这个方法
	@OnOpen
	public void open(Session session) {
	}
	//当发生错误时调用这个方法
	@OnError
	public void error(Session session,Throwable throwable) {
	}

}

注解应该都能见名知意,其中@ServerEndpoint中的参数为客户端访问的路径,类似于springboot的@RequestMapping

4.页面编写

这次页面就一切从简了

<div>
	<button onclick="sendMessage()"> 发送消息</button>
</div>
<script>
	var socket;
	//首先判断是否支持WebSocket
	if (window.WebSocket) {
		//这里用来新建一个socket连接
		//ws:// 为前缀,类似于http://其中ws就是websocket的缩写
		//127.0.0.1:9999 这是IP地址加端口号,应该不用大说明
		//socket.ws 这是在socket类@ServerEndpoint注解中的参数
		socket = new WebSocket("ws://127.0.0.1:9999/socket.ws");
		//下面四个方法理应见名知意,同java类中的功能
		//接受消息后的操作
		socket.onmessage = function(event) {
			//独立出了一个方法来执行接收消息后的操作
			message(event.data);
		};
		//打开连接后的操作
		socket.onopen = function(event) {
			console.log(event);
		};
		//关闭连接后的操作
		socket.onclose = function(event) {
			console.log(event);
		};
		//发生异常时的操作
		socket.onerror = function(event) {
			console.log(event);
		};
	} else {
		alert("NO");
	}

	function message(data) {
		console.log(data)
	}
	//向服务器发送消息
	function sendMessage() {
		socket.send('Hello world!!!')
	}
</script>

其中大部分解释都写在注释中了

5.实践一下

java类加入打印

	@OnMessage
	public void message(String message, Session session) {
		System.out.println("message:" + session.getId() + "-" + message);
		//通过session向客户端发送消息
		session.getAsyncRemote().sendText("Hello websocket!!!");
	}

	@OnClose
	public void close(Session session) {
		System.out.println("close:" + session.getId());
	}

	@OnOpen
	public void open(Session session) {
		System.out.println("open:" + session.getId());
	}

	@OnError
	public void error(Session session, Throwable throwable) {
		System.out.println("error:" + session.getId());
	}

页面保持不变了就

1. 启动服务器

2. 打开前端页面
因为直接写在了script标签中,一打开页面,自动连接,并触发了onopen

服务端也是如此

3. 发送消息

首先点击页面按钮
服务端接收到了页面发送的消息

同时页面也得到了反馈