WebSocket實現簡單的即時通訊

阿新 • • 發佈：2019-01-21

瀏覽器能夠與伺服器建立連線，通過已建立的通訊通道來發送和接收資料而不需要由HTTP協議引入額外其他的開銷來實現。

在本教程中我們將在Java EE環境下實現一個簡單的websockect伺服器端來和客戶端進行資料互動。

本教程需要以下環境：

eclipse
JDK8
tomcat8
Maven

pom.xml內容

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">
<modelVersion>4.0.0</modelVersion>
<groupId>me.gacl</groupId>
<artifactId>JavaWebSocket</artifactId>
<packaging>war</packaging>
<version>1.0-SNAPSHOT</version>
<name>JavaWebSocket Maven Webapp</name>
<url>http://maven.apache.org</url>
<dependencies>
<dependency>
<groupId>javax</groupId>
<artifactId>javaee-api</artifactId>
<version>7.0</version>
<scope>provided</scope>
</dependency>
</dependencies>
<build>
<finalName>JavaWebSocket</finalName>
</build>
</project>

1.WebSocket伺服器端

WebSocketTest.java

package me.gacl.websocket;

import java.io.IOException;
import java.util.concurrent.CopyOnWriteArraySet;

import javax.websocket.*;
import javax.websocket.server.ServerEndpoint;

/**
* @ServerEndpoint 註解是一個類層次的註解，它的功能主要是將目前的類定義成一個websocket伺服器端,
* 註解的值將被用於監聽使用者連線的終端訪問URL地址,客戶端可以通過這個URL來連線到WebSocket伺服器端
*/
@ServerEndpoint("/myWebsocketTest")
public class WebSocketTest {
//靜態變數，用來記錄當前線上連線數。應該把它設計成執行緒安全的。
private static int onlineCount = 0;

//concurrent包的執行緒安全Set，用來存放每個客戶端對應的MyWebSocket物件。若要實現服務端與單一客戶端通訊的話，可以使用Map來存放，其中Key可以為使用者標識
private static CopyOnWriteArraySet<WebSocketTest> webSocketSet = new CopyOnWriteArraySet<WebSocketTest>();

//與某個客戶端的連線會話，需要通過它來給客戶端傳送資料
private Session session;

   /**
   * 連線建立成功呼叫的方法
   * @param session 可選的引數。session為與某個客戶端的連線會話，需要通過它來給客戶端傳送資料
   */
   @OnOpen
   public void onOpen(Session session){
       this.session = session;
       webSocketSet.add(this); //加入set中
       addOnlineCount(); //線上數加1
       System.out.println("有新連線加入！當前線上人數為" + getOnlineCount());
   }

   /**
   * 連線關閉呼叫的方法
   */
   @OnClose
   public void onClose(){
       webSocketSet.remove(this); //從set中刪除
       subOnlineCount(); //線上數減1
       System.out.println("有一連線關閉！當前線上人數為" + getOnlineCount());
   }

   /**
   * 收到客戶端訊息後呼叫的方法
   * @param message 客戶端傳送過來的訊息
   * @param session 可選的引數
   */
   @OnMessage
   public void onMessage(String message, Session session) {
       System.out.println("來自客戶端的訊息:" + message);
       //群發訊息
       for(WebSocketTest item: webSocketSet){
           try {
               item.sendMessage(message);
           } catch (IOException e) {
               e.printStackTrace();
               continue;
           }
       }
   }

   /**
   * 發生錯誤時呼叫
   * @param session
   * @param error
   */
   @OnError
   public void onError(Session session, Throwable error){
       System.out.println("發生錯誤");
       error.printStackTrace();
   }

   /**
   * 這個方法與上面幾個方法不一樣。沒有用註解，是根據自己需要新增的方法。
   * @param message
   * @throws IOException
   */
   public void sendMessage(String message) throws IOException{
       this.session.getBasicRemote().sendText(message);
       //this.session.getAsyncRemote().sendText(message);
   }

   public static synchronized int getOnlineCount() {
       return onlineCount;
   }

   public static synchronized void addOnlineCount() {
       WebSocketTest.onlineCount++;
   }

   public static synchronized void subOnlineCount() {
       WebSocketTest.onlineCount--;
   }
}
2. 客戶端

<%@ page language="java" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html>
<head>
<title>Java後端WebSocket的Tomcat實現</title>
</head>
<body>
Welcome<br/><input id="text" type="text"/>
<button onclick="send()">傳送訊息</button>
<hr/>
<button onclick="closeWebSocket()">關閉WebSocket連線</button>
<hr/>
<div id="message"></div>
</body>

ws://IP地址:埠號/專案名/@ServerEndpoint中的value值
websocket = new WebSocket("ws://192.168.43.148:8080/JavaWebSocket/myWebsocketTest");

}
else {
alert('當前瀏覽器 Not support websocket')
}

//連線發生錯誤的回撥方法
websocket.onerror = function () {
setMessageInnerHTML("WebSocket連線發生錯誤");
};

//連線成功建立的回撥方法
websocket.onopen = function () {
setMessageInnerHTML("WebSocket連線成功");
}

//接收到訊息的回撥方法
websocket.onmessage = function (event) {
setMessageInnerHTML(event.data);
}

//連線關閉的回撥方法
websocket.onclose = function () {
setMessageInnerHTML("WebSocket連線關閉");
}

//監聽視窗關閉事件，當視窗關閉時，主動去關閉websocket連線，防止連線還沒斷開就關閉視窗，server端會拋異常。
window.onbeforeunload = function () {
closeWebSocket();
}

//將訊息顯示在網頁上
function setMessageInnerHTML(innerHTML) {
document.getElementById('message').innerHTML += innerHTML + '<br/>';
}

//關閉WebSocket連線
function closeWebSocket() {
websocket.close();
}

//傳送訊息
function send() {
var message = document.getElementById('text').value;
websocket.send(message);
}
</script>
</html>

WebSocket實現簡單的即時通訊

1.WebSocket伺服器端

WebSocket實現簡單的即時通訊

websocket實現簡單聊天程序

websocket實現簡單的通信

WebSocket實現web即時通信(後端nodejs實現)

flask + websocket實現簡單的單聊和群聊

JavaScript WebSocket實現長連線通訊連線重連

百度t7 課程， websocket 實現簡單聊天室

使用cocoscreator + node.js + websocket實現簡單的聊天服務

websocket實現簡單聊天

Java中WebSocket實現簡單的聊天

swoole實現IM即時通訊demo

一個基於webSocket實現前後端通訊的小demo

【tcp-ip學習總結】使用tcp協議實現簡單的通訊小程式

spring boot + webSocket 實現簡單會話與線上人數統計的demo

java WebSocket實現簡單的聊天室（包括群發和點對點聊天）

【Flask + WebSocket 實現簡單的聊天室】

SpringBoot WebSocket 實現簡單的聊天功能

利用websocket搭建網頁即時通訊（demo）

spring websocket實現前後端通訊

基於websocket的網頁即時通訊(可傳附件圖片塗鴉、最小化狀態通知).NET，winform客戶端、服務端

WebSocket實現簡單的即時通訊

1.WebSocket伺服器端

相關推薦