websocket Tomcat JSP Demo
阿新 • • 發佈：2018-12-03
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>WebSocket示例</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="description" content="This is my page"> </head> <body onload="OpenConn();"> <input type="text" name="msg" id="msg"><br/> <button onclick="send();">傳送</button> <div id="div"></div> </body> <script type="text/javascript"> var ws; // 就是一個通訊管道 var target = "ws://localhost:8080/websocket";//服務端的url，注意以ws開頭 function OpenConn(){ //三個判斷用於獲取ws通訊管道（瀏覽器相容） if('WebSocket' in window){ ws = new WebSocket(target); }else if('MozWebSocket' in window){ ws = new MozMozWebSocket(target); }else{ alert("WebSocket is not supported by this browse"); return; } //ws.onopen = function(){} 連結開啟會執行方法 //ws.onclose = function(){} 斷開連線會執行方法 //以上兩個實際用處並不多，主要是下面的 //伺服器又資訊返回就執行方法 ws.onmessage=function(event){ //服務端一返回內容，就把該內容放到div標籤當中 // document.getElementById("div").innerHTML=event.data; // var jsonObj = JSON.parse(event.data); document.getElementById("div").innerHTML = jsonObj["goodsName"]; //方便在控制檯檢視返回內容的具體資訊 console.info(event); }; }; function send(){ //點擊發送按鈕就把輸入框裡的內容傳送給伺服器，並把輸入框的內容清空 var msg = document.getElementById("msg").value; ws.send(msg); document.getElementById("msg").value = ""; }; </script> </html>