js作為websocket client，服務用java 點對點、一對多聊天
- 今天就分享前端的websokcet處理
websocket處理就是一個客服端和服務端之間的長連接
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>聊天室</title>
<style>
#message {
margin-top: 20px;
border: 1px solid gray;
padding: 20px;
}
</style>
</head>
<body>
昵稱：<input type="text" id="nickname" />
<!-- <button onclick="conectWebSocket()">連接WebSocket</button> -->
<button onclick="initws()">連接WebSocket</button>
<button onclick="closeWebSocket()">斷開連接</button>
<br /> 消息：
<input id="text" type="text" /> 頻道號
<input id="toUser" type="text" />
<button onclick="send()">發送消息</button>
<!-- 存放接收到的消息. -->
<div id="message">
</div>
<script type="text/javascript">
//連接對象.
var websocke = null;
var nickname = null;
var uid = null;
function conectWebSocket() {
nickname = document.getElementById("nickname").value;
if (nickname == '') {
alert("請輸入昵稱");
return;
}
//判斷當前的瀏覽器是否支持websocket.
if ("WebSocket" in window) {
uid = "sdaaaaaaaaaaaaaaaaaaaaaaaaa";
websocket = new WebSocket("ws://localhost:8080/websocket/" + nickname + "/" + uid);
} else {
alert("Not support websocket");
return false;
}
//連接成功的方法.
websocket.onopen = function(event) {
setMessgeHtml("Loc MSG:已連接");
}
//連接關閉.
websocket.onclose = function(event) {
// aler
setMessgeHtml("Loc MSG:連接關閉");
}
//連接異常.
websocket.onerror = function(event) {
setMessgeHtml("Loc MSG:連接異常");
}
websocket.onmessage = function(event) {
console.log("fallback :", event);
setMessgeHtml(event.data);
}
} //conectWebSocket
var single = (function() {
return {
getInstance: function() {
if (websocke != null && websocke.readyState == 1) {
console.log("wlx-------------------" + websocke.readyState)
setMessgeHtml("Loc MSG:不能重復連接！");
return websocke
} else {
websocket = null
nickname = document.getElementById("nickname").value;
if (nickname == '') {
alert("請輸入昵稱");
return;
}
//判斷當前的瀏覽器是否支持websocket.
if ("WebSocket" in window) {
uid = "sdaaaaaaaaaaaaaaaaaaaaaaaaa";
websocket = new WebSocket("ws://localhost:8080/websocket/" + nickname + "/" + uid);
} else {
alert("Not support websocket");
return false;
}
//連接成功的方法.
websocket.onopen = function(event) {
setMessgeHtml("Loc MSG:已連接");
}
//連接關閉.
websocket.onclose = function(event) {
// aler
setMessgeHtml("Loc MSG:連接關閉");
}
//連接異常.
websocket.onerror = function(event) {
setMessgeHtml("Loc MSG:連接異常");
}
websocket.onmessage = function(event) {
console.log("fallback :", event);
setMessgeHtml(event.data);
}
return websocket;
} //conectWebSocket
}
}
})();
function initws() {
websocke = single.getInstance()
}
function setMessgeHtml(msg) {
var message = document.getElementById("message");
message.innerHTML += msg + "<br/>";
}
function closeWebSocket() {
websocke.close();
}
/**
發送消息.
*/
function send() {
var message = document.getElementById("text").value;
var toUser = document.getElementById("toUser").value;
var socketMsg = {
msg: message,
toUser: toUser
};
if (toUser == '') {
socketMsg.type = 0; //群聊.
} else {
socketMsg.type = 1; //單聊.
}
console.log("發送的是：", socketMsg);
console.log("連接狀態：", websocke.readyState);
//websocket.send(nickname+":"+message);
websocke.send(JSON.stringify(socketMsg)); //將json對象轉換為json字符串.
}
</script>
</body>
</html>
websocket 要使用js單例模式，避免點擊一個連接的在發送消息的時候會收到兩個一樣的文件
ps: 服務端代碼有需求未完善，稍后分享