作者丨桌前明月
来源丨Java学习之道
原文地址
https://zhuoqianmingyue.blog.csdn.net/article/details/82814086
关于webSocket是什么我在这里不做过多的阐述,如需了解更多,请参看文档: https://www.cnblogs.com/fuqiang88/p/5956363.html 进行了解。 接下来,我们直接进入实战代码让你来感受它是个什么东东。 直接上手操作 第一步、需要我们引入websocket的依赖:<dependency><groupId>org.springframework.bootgroupId><artifactId>spring-boot-starter-websocketartifactId>dependency>
如果使用外置的tomcat 需要引入javaee-api 我们这里不引入是因为我们使用的是内置的tomcat,spring-boot 内置tomcat 包含拉javaee-api 。
第二步、配置webSocket 配置信息,也就是配置webSocket 服务端点:
import org.springframework.context.annotation.Bean;import org.springframework.context.annotation.Configuration;import org.springframework.stereotype.Component;import org.springframework.web.socket.server.standard.ServerEndpointExporter;import javax.websocket.server.ServerEndpoint;
@Configuration
public class WebSocketConfig {
@Bean
public ServerEndpointExporter serverEndpointExporter(){return new ServerEndpointExporter();
}
}
第三步、开发接受和处理消息的处理类
import org.springframework.stereotype.Controller;import javax.websocket.*;import javax.websocket.server.ServerEndpoint;import java.io.IOException;import java.util.concurrent.CopyOnWriteArraySet;@Controller@ServerEndpoint("/websocket")public class Socket {/*websocket 客户端会话 通过Session 向客户端发送数据*/private Session session;/*线程安全set 存放每个客户端处理消息的对象*/private static CopyOnWriteArraySet webSocketSet = new CopyOnWriteArraySet();/*websocket 连接建立成功后进行调用*/@OnOpenpublic void onOpen(Session session) {this.session = session;
webSocketSet.add(this);
System.out.println("websocket 有新的链接"+webSocketSet.size());
}/*websocket 链接关闭调用的方法*/@OnClosepublic void onClose() {
webSocketSet.remove(this);
}/*收到客户端消息后调用的方法*/@OnMessagepublic void onMessage(String message) throws IOException {for (Socket socket : webSocketSet) {
socket.session.getBasicRemote().sendText("自己嘎给自己嘎发的消息:"+message);
}
}/*websocket 发生错误时进行调用*/@OnErrorpublic void onError(Session session,Throwable error){
error.printStackTrace();
}public void sendMessage(String message) throws IOException {for (Socket socket : webSocketSet) {
socket.session.getBasicRemote().sendText(message);
}
}public Session getSession() {return session;
}public void setSession(Session session) {this.session = session;
}
}
第四步、编写客户端访问页面 socket.html
html><html lang="en"><head><meta charset="UTF-8"><title>socket demotitle>head><body><h2>学说话的tom 猫h2><div><label>消息内容:label><p id="serverMessage">p>div><div><label>我对自己说:label><input id="sendMessage" type="text" /> <button onclick="send()">发送button>div><script type="text/javascript">var websocket = null;if('WebSocket' in window){
websocket = new WebSocket('ws://localhost:8080/bootlearn/websocket');
}else{
alert("该游览器不知此WebSocket");
}//websocket 链接成功后进行触发
websocket.onopen = function (event){console.log("建立链接。。。。");
}//websocket 链接关闭的进行触发
websocket.onclose = function (event){console.log("关闭链接。。。。");
}//接收到消息的进行触发
websocket.onmessage = function(event){var serverMessage = document.getElementById("serverMessage");
serverMessage.innerHTML= event.data;console.log("收到消息");
}//连接发生错误的进行触发
websocket.onerror = function(evt){console.log("WebSocketError!");
}//当窗口关闭时,主动去关闭websocket连接,防止连接还没断开就关闭窗口,server端会抛异常。window.onbeforeunload = function (){
websocket.close();
}//关闭websocket连接function closeWebSocket(){
websocket.close();
}//发送消息function send(){var sendIput = document.getElementById("sendMessage");var sendMessage = sendIput.value;if(sendMessage.trim() == ""){
alert("请输入发送消息!")return;
}
websocket.send(sendMessage);
}script>body>html>
第五步、编写通过后台发送消息的Controller
import org.springframework.beans.factory.annotation.Autowired;import org.springframework.web.bind.annotation.GetMapping;import org.springframework.web.bind.annotation.PathVariable;import org.springframework.web.bind.annotation.RequestMapping;import org.springframework.web.bind.annotation.RestController;import java.io.IOException;@RestController@RequestMapping("socket")public class SocketTestController {@Autowiredprivate Socket socket;@GetMapping("/{message}")public void sendMessage(@PathVariable("message") String message) throws IOException {
socket.sendMessage("这个是controller 发送的消息:"+message);
}
}
第六步、编写通过后台进行消息的发送controllerTest.html
html><html lang="en"><head><meta charset="UTF-8"><title>Titletitle>head><body><h2>通过controller 进行发送消息h2><input type="text" id="sendMessage"><button onclick="controllerSend()">发送button>body><script language="JavaScript">function controllerSend(){var sendIput = document.getElementById("sendMessage");var sendMessage = sendIput.value;if(sendMessage.trim() == ""){
alert("请输入发送消息!")return;
}//创建异步对象var xhr = new XMLHttpRequest();//设置请求的类型及url
xhr.open('get', 'http://localhost:8080/bootlearn/socket/'+sendMessage );//发送请求
xhr.send();
xhr.onreadystatechange = function () {// 这步为判断服务器是否正确响应if (xhr.readyState == 4 && xhr.status == 200) {console.log(xhr.responseText);
}
};
}script>html>
好啦代码部分编写完毕 接下来我们开始进行测试!
开始测试
第一步、启动springBoot:
第二步、打开游览器 访问socket.html
发送消息:
第三步、访问controller 发送测试页面
发送消息:
近期精彩内容推荐:
程序员这碗青春饭,怎么吃得更久一点?
顺丰小哥连升3级,国家授予特别奖!
狠人 Spring Cloud 20000 字总结!
python实现文件自动归类
在看点这里好文分享给更多人↓↓