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