WebSocket.之.基礎入門-前端發送消息
在《WebSocket.之.基礎入門-建立連接》的代碼基礎之上，進行添加代碼。代碼只改動了：TestSocket.java 和 index.jsp 兩個文件。
項目結構如下圖：
TestSocket.java
1 package com.charles.socket; 2 3 import javax.websocket.OnMessage; 4 import javax.websocket.OnOpen; 5 import javax.websocket.Session; 6 import javax.websocket.server.ServerEndpoint; 7 8 @ServerEndpoint(value = "/helloSocket") 9 public class TestSocket { 10 11 /*** 12 * 當建立鏈接時，調用的方法. 13 * @param session 14 */ 15 @OnOpen 16 public void open(Session session) { 17 18 System.out.println("開始建立了鏈接..."); 19 System.out.println("當前session的id是：" + session.getId()); 20 } 21 22 /*** 23 * 處理消息的方法. 24 * @param session 25 */ 26 @OnMessage 27 public void message(Session session, String data) { 28 29 System.out.println("開始處理消息..."); 30 System.out.println("當前session的id是：" + session.getId()); 31 System.out.println("從前端頁面傳過來的數據是：" + data); 32 } 33 }
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 // 往后台服務器發送消息. 25 function sendMessage() { 26 27 var sendmsg = document.getElementById("sendMsg").value; 28 console.log("發送的消息：" + sendmsg); 29 30 // 發送至后台服務器中. 31 websocket.send(sendmsg); 32 } 33 34 </script> 35 </head> 36 <body> 37 38 <button onclick="buildConnection();">開始建立鏈接</button> 39 <hr> 40 <input id="sendMsg" /> <button onclick="sendMessage();">消息發送</button> 41 42 </body> 43 </html>
運行我們的項目，注意 ：由於是Websocket是建立了長連接，所以當你改動了代碼，之后，建議重新啟動服務器。
打開瀏覽器，輸入地址：http://localhost:8080/websocket，訪問我們的項目。
注意：
和后台交互的時候，一定要先點擊：開始建立連接。你懂的...沒有建立連接的話，是不能發送消息的。
先點擊，開始建立連接，然后在文本框中輸入內容：我是Charles，點擊消息發送，在看后台日志。
后端成功接受到了前端發送的消息。
如有問題，歡迎糾正！！！
如有轉載，請標明源處： https://www.cnblogs.com/Charles-Yuan/p/9784458.html