第一次成功实现的WebSocket代码

最新推荐文章于 2025-10-27 11:54:04 发布

原创最新推荐文章于 2025-10-27 11:54:04 发布 · 1.4k 阅读

0 ·

CC 4.0 BY-SA版权

web开发专栏收录该内容

17 篇文章

订阅专栏

本文介绍了一个WebSocket客户端如何通过发送消息并接收服务器端响应进行交互的示例。客户端使用JavaScript创建WebSocket连接，而服务器端使用Java实现基本的消息处理逻辑。

服务器端代码：

package MyfirstWebSocket;

import java.io.IOException;

import javax.websocket.OnClose;
import javax.websocket.OnMessage;
import javax.websocket.OnOpen;
import javax.websocket.Session;
import javax.websocket.server.ServerEndpoint;
 
@ServerEndpoint(value="/websocketT")
public class WebSocketTest {
 
  @OnMessage
  public void onMessage(String message, Session session)
    throws IOException, InterruptedException {
   
    // Print the client message for testing purposes
    System.out.println("Received: " + message);
   
    // Send the first message to the client
    session.getBasicRemote().sendText("This is the first server message");
   
    // Send 3 messages to the client every 5 seconds
    int sentMessages = 0;
    while(sentMessages < 3){
      Thread.sleep(5000);
      session.getBasicRemote().
        sendText("This is an intermediate server message. Count: "
          + sentMessages);
      sentMessages++;
    }
   
    // Send a final message to the client
    session.getBasicRemote().sendText("This is the last server message");
  }
   
  @OnOpen
  public void onOpen() {
    System.out.println("Client connected");
  }
 
  @OnClose
  public void onClose() {
    System.out.println("Connection closed");
  }
}

页面代码：

<!DOCTYPE html>
<html>
<head>
<title>Testing websockets</title>
</head>
<body>
  <div>
    <input type="submit" value="Start" onclick="start()" />
  </div>
  <div id="messages"></div>
  <script type="text/javascript">
    var webSocket =
      new WebSocket('ws://localhost:8080/WebSocket/websocketT');
 
    webSocket.onerror = function(event) {
      onError(event)
    };
 
    webSocket.onopen = function(event) {
      onOpen(event)
    };
 
    webSocket.onmessage = function(event) {
      onMessage(event)
    };
 
    function onMessage(event) {
      document.getElementById('messages').innerHTML
        += '<br />' + event.data;
    }
 
    function onOpen(event) {
      document.getElementById('messages').innerHTML
        = 'Connection established';
    }
 
    function onError(event) {
      alert(event.data);
    }
 
    function start() {
      webSocket.send('hello');
      return false;
    }
  </script>
</body>
</html>

注意点，tomcat7及以上才行，必须引用javax.websocket-api-1.0.jar 才行

修改1：tomcat7会出现404错误，最好使用tomcat8