【WebSocket】WebSocket經典例項
阿新 • • 發佈：2019-02-15
接著上一篇的環境，我們接下來弄了個WebSocketTest2
目錄結構
WebSocketTest2.java
package com.hust.websockettest;
import java.io.IOException;
import java.util.Queue;
import java.util.Set;
import java.util.concurrent.ConcurrentLinkedQueue;
import javax.websocket.OnClose;
import javax.websocket.OnMessage;
import javax.websocket.OnOpen;
import index.jsp
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>My JSP 'index.jsp' starting page</title>
<style type="text/css">
.infos {
list-style-type: none;
}
.infos li {
border: 1px solid #EEE;
margin: 2px;
font-size: 12px;
line-height: 25px;
height: 25px;
}
.red {
color: red;
}
.green {
color: green;
}
.blue {
color: blue;
}
</style>
<script type="text/javascript" src="jquery-1.12.3.js"></script>
<script type="text/javascript">
var webSocket = null;
var flag = true;//全域性標記位，標記瀏覽器是否支援websocket
$(function() {
if (!window.WebSocket) {
$("body").append("<h1>你的瀏覽器不支援WebSocket</h1>");
flag = false;
return;
}
});
function startConnect() {
if (flag == false) {
return;
}
var url = "ws://localhost:8080/WebSocketTest/websocket2";
webSocket = new WebSocket(url);
webSocket.onerror = function(event) {
onError(event)
};
webSocket.onopen = function(event) {
onOpen(event)
};
webSocket.onmessage = function(event) {
onMessage(event)
};
//webSocket.send("客戶端給服務端傳送訊息：hello,start");
}
function onMessage(event) {
$(".infos").append("<li class='blue'>" + event.data + "</li>");
}
function onOpen(event) {
$(".infos").append("<li class='green'>已連線至伺服器</li>");
$("#startBtn").prop("disabled", true);
$("#sendMessageBtn").prop("disabled", false);
}
function onError(event) {
$(".infos").append("<li class='red'>連線伺服器發生錯誤</li>");
}
function sendMessage() {
var msg = "[" + $("#username").val() + "]："
+ $("#message_input_id").val();//獲取傳送資訊
webSocket.send(msg);//向伺服器傳送訊息
//不需要將此資訊追加到列表，由後臺統一將訊息傳送給所有
//$(".infos").append("<li class='green'>" + msg + "</li>");//將訊息新增至本地列表
$("#message_input_id").val("");//清空訊息
}
</script>
</head>
<body>
<ul class="infos">
<li class="red">提示：點選開始連線將連線到伺服器</li>
</ul>
<br />
<br />
<input type="button" value="開始連線" id="startBtn"
onclick="startConnect()" />
<br />
<br /> 輸入名稱：
<input id="username" value="<%=(int) (Math.random() * 1000)%>"
style="width: 50px; margin-right: 5px;" />
<input id="message_input_id" />
<input type="button" value="傳送訊息" id="sendMessageBtn"
disabled="disabled" onclick="sendMessage()" />
</body>
</html>執行截圖
看圖基本明白，第一個是我連線之後斷開額，二三是一起連線著的，所以後臺會顯示add=2。就是可以多個一起連結，而且是長連線。