<!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單例模式,避免點擊一個鏈接的在發送消息的時候會收到兩個同樣的文件javascript
ps: 服務端代碼有需求未完善,稍後分享html
轉載請說明出處:http://www.javashuo.com/article/p-hztuartr-dr.html前端