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