| <!DOCTYPE html>
<html lang="en">
????<head>
????????<meta charset="UTF-8">
????????<meta http-equiv="X-UA-Compatible" content="IE=edge">
????????<meta name="viewport" content="width=device-width, initial-scale=1.0">
????????<title>聊天室</title>
????????<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
????????<style type="text/css">
????????????input{
????????????????width: 150px;
????????????????height: 30px;
????????????????line-height: 25px;
????????????????padding: 5px 10px;
????????????????border-radius: 5px;
????????????????border: 2px solid;
????????????????font-size: 16px;
????????????}
????????????#msg{
????????????????width: 300px;
????????????}
????????????button{
????????????????width: 80px;
????????????????height: 44px;
????????????????padding: 5px 20px;
????????????????border-radius: 5px;
????????????}
????????</style>
????</head>
????<body>
????????聊天室<br/><br/>
????????<input type="text" id="sendOutUser" placeholder="自己的用戶名">
????????<button onclick="connectWebSocket()">上線</button>
????????<button onclick="closeWebSocket()">下線</button>
????????<br/><br>
????????<input type="text" id="msg" placeholder="要發(fā)送的信息"/>
????????<input type="text" id="receiveUser" placeholder="接收人的用戶名"/>
????????<button onclick="send()">發(fā)送</button>
????????<br><br>
????????<hr>
????????<div id="msgList"></div>
????????<script type="text/javascript">
????????????var websocket = null;
????????????//連接WebSocket
????????????function connectWebSocket() {
????????????????var sendOutUser = document.getElementById("sendOutUser").value;
????????????????if (sendOutUser === "") {
????????????????????alert("請輸入用戶名");
????????????????????return;
????????????????}
????????????????//判斷當(dāng)前瀏覽器是否支持websocket
????????????????if ('WebSocket' in window) {
????????????????????websocket = new WebSocket("ws://localhost:7070/web-socket/"+document.getElementById("sendOutUser").value);
????????????????} else {
????????????????????alert('當(dāng)前瀏覽器 not support websocket')
????????????????}
????????????????//連接發(fā)生錯(cuò)誤的回調(diào)方法
????????????????websocket.onerror = function () {
????????????????????alert("連接發(fā)生錯(cuò)誤");
????????????????};
????????????????//連接成功建立的回調(diào)方法
????????????????websocket.onopen = function () {
????????????????????var sendOutUser = document.getElementById("sendOutUser")
????????????????????sendOutUser.readOnly = true
????????????????????sendOutUser.style.backgroundColor='#ddd'
????????????????}
????????????????//接收到消息的回調(diào)方法
????????????????websocket.onmessage = function (event) {
????????????????????console.log(event.data)
????????????????????innerdiv("",event.data)
????????????????}
????????????????//連接關(guān)閉的回調(diào)方法
????????????????websocket.onclose = function () {
????????????????????innerdiv("","websocket連接關(guān)閉");
????????????????}
????????????????//監(jiān)聽窗口關(guān)閉事件，當(dāng)窗口關(guān)閉時(shí)，主動(dòng)去關(guān)閉websocket連接，防止連接還沒斷開就關(guān)閉窗口，server端會(huì)拋異常。
????????????????window.onbeforeunload = function () {
????????????????????closewebsocket();
????????????????}
????????????}
????????????//關(guān)閉連接
????????????function closeWebSocket() {
????????????????websocket.close();
????????????}
????????????//發(fā)送消息
????????????function send() {
????????????????var m = new Map(); // 空Map
????????????????var sendOutId = document.getElementById("sendOutUser")? //發(fā)送者
????????????????var msg = document.getElementById("msg").value? //發(fā)送消息
????????????????if (msg === "") {
????????????????????alert("請輸入消息");
????????????????????return;
????????????????}
????????????????var receiveUser = document.getElementById("receiveUser").value //接收者
????????????????m.set("sendOutUser",sendOutUser.value);
????????????????m.set("msg",msg)
????????????????// 接收者為空時(shí)，type為群聊，否則為私聊
????????????????if (receiveUser === "") {
????????????????????m.set("type",0)
????????????????}else{
????????????????????m.set("receiveUser",receiveUser)
????????????????????m.set("type",1)
????????????????}
????????????????json = mapToJson(m)
????????????????websocket.send(json)
????????????????innerdiv("我",msg)
????????????}
????????????//map轉(zhuǎn)換為json
????????????function? mapToJson(map) {
????????????????var obj= Object.create(null);
????????????????for (var[k,v] of map) {
????????????????????obj[k] = v;
????????????????}
????????????????return JSON.stringify(obj);
????????????}
????????????//顯示聊天記錄到頁面
????????????function innerdiv(id,txt){
????????????????var msgList = document.getElementById("msgList")
????????????????if (id === "") {
????????????????????msgList.innerHTML += "<div>" + txt + "</div><br>"
????????????????}else{
????????????????????msgList.innerHTML += "<div>"+ id +": "+txt+ "</div><br>"
????????????????}
????????????}
????????</script>
????</body>
</html>
| 