js作為websocket client，服務用java 點對點、一對多聊天

今天就分享前端的websokcet處理

websocket處理就是一個客服端和服務端之間的長連接

聊天室

#message {

margin-top: 20px;

border: 1px solid gray;

padding: 20px;

}

昵稱：

連接WebSocket

斷開連接

消息：

頻道號

發送消息

//連接對象.

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 + "
";

}

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字符串.

}

websocket 要使用js單例模式，避免點擊一個連接的在發送消息的時候會收到兩個一樣的文件

ps: 服務端代碼有需求未完善，稍后分享

總結

以上是生活随笔為你收集整理的java 一对多 socket_js作为websocket client，服务用java 点对点、一对多聊天的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。