WebSocket.之.基础入门-后端响应消息
在《WebSocket.之.基础入门-前端发送消息》的代码基础之上，进行添加代码。代码只改动了：TestSocket.java 和 index.jsp 两个文件。
项目结构如下：
TestSocket.java 代码
1 package com.charles.socket;
2
3 import java.io.IOException;
4
5 import javax.websocket.OnMessage;
6 import javax.websocket.OnOpen;
7 import javax.websocket.Session;
8 import javax.websocket.server.ServerEndpoint;
9
10 @ServerEndpoint(value = "/helloSocket")
11 public class TestSocket {
12
13 /***
14 * 当建立链接时，调用的方法.
15 * @param session
16 */
17 @OnOpen
18 public void open(Session session) {
19
20 System.out.println("开始建立了链接...");
21 System.out.println("当前session的id是：" + session.getId());
22 }
23
24 /***
25 * 处理消息的方法.
26 * @param session
27 */
28 @OnMessage
29 public void message(Session session, String data) {
30
31 System.out.println("开始处理消息...");
32 System.out.println("当前session的id是：" + session.getId());
33 System.out.println("从前端页面传过来的数据是：" + data);
34
35
36 String message = "你好，我是后端程序...";
37 try {
38 session.getBasicRemote().sendText(message);
39 } catch (IOException e) {
40 e.printStackTrace();
41 }
42
43 }
44 }
index.jsp 代码
1 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
2 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
3 <html>
4 <head>
5 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
6 <title>Charles-WebSocket</title>
7
8 <script type="text/javascript">
9
10 var websocket = null;
11 var target = "ws://localhost:8080/websocket/helloSocket";
12
13 function buildConnection() {
14
15 if(‘WebSocket‘ in window) {
16 websocket = new WebSocket(target);
17 } else if(‘MozWebSocket‘ in window) {
18 websocket = MozWebSocket(target);
19 } else {
20 window.alert("浏览器不支持WebSocket");
21 }
22
23 // 添加监听消息的方法
24 websocket.onmessage = function(event) {
25 console.log(event)
26 console.log(event.data)
27 document.getElementById("serverMsg").innerHTML = "<p>后端消息 ："+ event.data +"</p>"
28 }
29 }
30
31 // 往后台服务器发送消息.
32 function sendMessage() {
33
34 var sendmsg = document.getElementById("sendMsg").value;
35 console.log("发送的消息：" + sendmsg);
36
37 // 发送至后台服务器中.
38 websocket.send(sendmsg);
39 }
40
41 </script>
42 </head>
43 <body>
44
45 <button onclick="buildConnection();">开始建立链接</button>
46 <hr>
47 <input id="sendMsg" /> <button onclick="sendMessage();">消息发送</button>
48 <div id="serverMsg"></div>
49
50 </body>
51 </html>
运行项目，由于改动了代码，建议：重新启动Tomcat服务器。
项目启动后，通过浏览器访问页面，地址：http://localhost:8080/websocket
注意：
一定要先点击，开始建立连接按钮，然后输入内容，在点击消息发送...你懂的.
现在看后端日志....
前端能发送消息，后端也能响应，一切OK...
如有问题，欢迎纠正！！！
如有转载，请标明源处：https://www.cnblogs.com/Charles-Yuan/p/9784555.html
原文地址：https://www.cnblogs.com/Charles-Yuan/p/9784555.html
时间： 2024-11-07 19:04:52