分享基於 websocket 網頁端聊天室

WebSocket · 發表 2019-02-18 23:43:00

摘要：部落格地址： https://ainyi.com/#/67 有一個月沒有寫部落格了，也是因為年前需求多、回家過春節的原因，現在返回北京的第二天，想想，應該也要分享技術專題的部落格了！！主題基於 websocket 網頁端聊天室 WebSocket 協議是基於 TCP 的...

部落格地址： https://ainyi.com/#/67

有一個月沒有寫部落格了，也是因為年前需求多、回家過春節的原因，現在返回北京的第二天，想想，應該也要分享技術專題的部落格了！！

主題

基於 websocket 網頁端聊天室

WebSocket 協議是基於 TCP 的一種新的網路協議。它實現了瀏覽器與伺服器全雙工 (full-duplex) 通訊——允許伺服器主動傳送資訊給客戶端。

使用 java 開發後臺

需要匯入一個jar包：javax.websocket-api-1.0-rc4.jar

後臺程式碼

package com.krry.socket;
import java.io.IOException;
import java.util.concurrent.CopyOnWriteArraySet;
 
import javax.websocket.OnClose;
import javax.websocket.OnError;
import javax.websocket.OnMessage;
import javax.websocket.OnOpen;
import javax.websocket.Session;
import javax.websocket.server.ServerEndpoint;
 
//該註解用來指定一個URI，客戶端可以通過這個URI來連線到WebSocket。類似Servlet的註解mapping。無需在web.xml中配置。
@ServerEndpoint("/websocket")
public class MyWebSocket {
//靜態變數，用來記錄當前線上連線數。應該把它設計成執行緒安全的。
private static int onlineCount = 0;

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

//與某個客戶端的連線會話，需要通過它來給客戶端傳送資料
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(MyWebSocket 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() {
MyWebSocket.onlineCount++;
}

public static synchronized void subOnlineCount() {
MyWebSocket.onlineCount--;
}
}

前端程式碼

注意

前端需要實現這幾個方法：

// 註冊事件
// 監聽開啟連線
ws.onopen = function(){
openWs();
};
// 監聽訊息
ws.onmessage = function(event){
msgWs(event);
};
// 監聽關閉連線
ws.onclose = function(){
closeWs();
};
// 監聽傳送錯誤
ws.onerror = function(){
errorWs();
};

具體程式碼

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!doctype html>
<html>

<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<meta name="keywords" content="">
<meta name="description" content="">
<title>
基於Java伺服器端的訊息主動推送技術揭祕 --krry
</title>
<link rel="stylesheet" href="css/animate.css" />
<link rel="stylesheet" type="text/css" href="css/sg.css" />
<style>
*{margin:0;padding:0;} body{background:url("images/5.jpg");background-size:cover;}
h1{margin-top:50px;text-align:center;color:#fff;text-shadow:1px 1px 1px
#000;font-family:-webkit-body;font-size:24px;} .box{width:700px;margin:20px
auto;} .box span{color:#f60;font-size:16px;font-family:"微軟雅黑";} .box .shu{text-indent:1em;height:24px;font-family:"微軟雅黑";border:0;outline:none;font-size:14px;}
.box .add{width:300px;margin-right:24px;} .box .user{width:200px;} .box
.btn{width:80px;height:34px;color:#fff;background:#6c0;border:0;outline:none;cursor:pointer;margin-top:20px;font-size:16px;font-family:"微軟雅黑";}
.box .area{line-height: 29px;height:280px;width:680px;padding:10px;overflow:auto;font-size:16px;font-family:"微軟雅黑";margin:20px
0;outline:none;box-shadow:1px 2px 18px #000} .box .setex{text-indent:1em;height:28px;border:1px
solid #6c0;width:618px;outline:none;float:left;font-family:"微軟雅黑";} .box
.send{font-size:14px;width:80px;height:30px;color:#fff;background:#6c0;border:0;outline:none;cursor:pointer;font-family:"微軟雅黑";}
</style>
</head>

<body>
<h1>
基於Java伺服器端的訊息主動推送技術揭祕 --krry
</h1>
<div class="box">
<span>
伺服器地址：
</span>
<input type="text" class="shu add" value="www.ainyi.com/krry_NetChat/websocket"
readonly/>
<span>
使用者名稱：
</span>
<input type="text" class="shu user" value="匿名" />
<input type="button" value="連線" class="btn" />
<div class="area" id="boxx">
</div>
<div class="c_cen">
<input type="text" class="setex" />
<input type="button" value="傳送" class="send">
</div>
</div>
<script src="js/jquery-1.11.1.min.js">
</script>
<script src="js/sg.js">
</script>
<script src="js/sgutil.js">
</script>
<script>
var close = true;
var ws;
$(function() {
$(".c_cen").hide();
//首先判斷瀏覽器是否支援webSocket，支援h5的瀏覽器才會支援
if (window.WebSocket) {
printMsg("您的瀏覽器支援WebSocket，您可以嘗試連線到聊天伺服器！", "OK");
} else {
printMsg("您的瀏覽器不支援WebSocket，請選擇其他瀏覽器！", "ERROR");
//設定按鈕不可點選
$(".btn").attr("disabled", "true");
}
});
//列印資訊
function printMsg(msg, msgType) {
if (msgType == "OK") {
msg = "<span style='color:green'>" + msg + "</span>";
}
if (msgType == "ERROR") {
msg = "<span style='color:red'>" + msg + "</span>";
}
$(".area").append(msg + "<br/>");
var boxx = document.getElementById("boxx");
boxx.scrollTop = boxx.scrollHeight; //使滾動條一直在底部
}

//開啟Socket
function openWs() {
printMsg("連結已建立", "OK");
ws.send("【" + $(".user").val() + "】已進入聊天室");
$(".c_cen").show();
}

//接收訊息的時候
function msgWs(e) {
printMsg(e.data);
}
//關閉連線
function closeWs() {
$(".btn").val("連線");
$(".c_cen").hide();
}
//產生錯誤
function errorWs() {
printMsg("您與伺服器連線錯誤...", "ERROR");
}

//點擊發送按鈕
$(".send").click(function() {
var text = $(".setex").val();
if (text == null || text == "") return;
$(".setex").val("");
ws.send("【" + $(".user").val() + "】：" + text);
});

//點選連線
$(".btn").click(function() {
if ($(".add").val() && $(".user").val()) {
if (close) {
printMsg("正在準備連線伺服器，請稍等...");
var url = "wss://" + $(".add").val();
if ("WebSocket" in window) {
ws = new WebSocket(url);
} else if ("MozWebSocket" in window) {
ws = new MozWebSocket(url);
}
//已連線
$(".btn").val("斷開");
close = false;

//註冊事件
ws.onopen = function() {
openWs();
};
ws.onmessage = function(event) {
msgWs(event);
};
ws.onclose = function() {
closeWs();
};
ws.onerror = function() {
errorWs();
};

//監聽視窗關閉事件，當視窗關閉時，主動去關閉websocket連線，防止連線還沒斷開就關閉視窗，server端會拋異常。
window.onbeforeunload = function() {
ws.send("【" + $(".user").val() + "】離開了聊天室");
close = true;
ws.close();
};

} else {
ws.send("【" + $(".user").val() + "】離開了聊天室");
close = true;
ws.close();
}
} else {
$.tmDialog.alert({
open: "left",
content: "伺服器地址和使用者名稱不能為空哦...",
title: "提示哦~~~"
});
}
});

//回車鍵
$(".setex").keypress(function(event) {
if (event.keyCode == 13) {
$(".send").trigger("click");
}
});
</script>
</body>

</html>

到這裡大功告成