1. 程式人生 > >Java WebSocket程式設計(一):EchoServer應用

Java WebSocket程式設計(一):EchoServer應用

通過一個簡單的示例(EchoServer應用)來了解Java WebSocket原理。這是一個客戶端/伺服器應用,客戶端是Web瀏覽器上的一小段JavaScript,伺服器是一個WebSocket端點。
這裡寫圖片描述

執行環境:Java 8 ,Eclipse Java EE ,Tomcat 9.0。


建立WebSocket端點

import javax.websocket.OnMessage;
import javax.websocket.server.ServerEndpoint;
/**
 * EchoServer類實現了伺服器端點所擁有的功能(所有邏輯)
 * @author
seeker * */
@ServerEndpoint(value = "/echo") public class EchoServer { // echo方法引數用來儲存客戶端傳送的任意入站訊息,並對它處理後返回。 @OnMessage public String echo(String incomingMessage) { return "I got this " + incomingMessage + "so I am sending it back."; } }
  • @ServerEndPoint:類級別的註解,用於告訴Java平臺所註解的類要成為一個WebSocket端點。唯一強制引數value是相對URI,定義了端點將被髮布的路徑。
  • @OnMessage:方法級別的註解,用於在特定事件發生時呼叫方法。

建立WebSocket客戶端

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv
="Content-Type" content="text/html; charset=UTF-8">
<title>Web Socket JavaScript Echo Client</title> <script type="text/javascript" src="/socket/js/jQuery.js"></script> <script language="javascript" type="text/javascript"> var echo_websocket; function init() { output = document.getElementById("output"); } function send_echo() { //伺服器端實現功能的方法的訪問路徑 var wsUri = "ws://localhost:8080/socket/echo"; writeToScreen("Connection to " + wsUri); echo_websocket = new WebSocket(wsUri); echo_websocket.onopen = function(event) { writeToScreen("Connected !"); doSend(textId.value); }; echo_websocket.onmessage = function(event) { writeToScreen("Received message:" + event.data); echo_websocket.close(); }; echo_websocket.onerror = function(event) { writeToScreen('<span style="color: red;"> ERROR:</span> ' + event.data); echo_websocket.close(); }; function doSend(message) { echo_websocket.send(message); writeToScreen("Send message: " + message); } function writeToScreen(message) { var pre = document.createElement("p"); pre.style.wordWrap = "break-word"; pre.innerHTML = message; output.appendChild(pre); window.addEventListener("load", init, false); } } </script> </head> <body> <h1>Echo Server</h1> <div style="text-align: left;"> <form action=""> <input onclick="send_echo()" value="Press to send" type="button"> <input id="textId" name="message" value="Hello Web Sockets" type="text"> <br> </form> </div> <div id="output"></div> </body> </html>

執行結果如下:
這裡寫圖片描述