nodejs + websocket vervollständigt eine Chat-Systemfunktion-js-Tutorial-php.cn

nodejs + websocket vervollständigt eine Chat-Systemfunktion

Y2J

Freigeben： 2017-05-20 13:22:11

Original

2425 Leute haben es durchsucht

In diesem Artikel wird hauptsächlich die verbesserte Version des Echtzeit-Chat-Systems nodejs+websocket vorgestellt, die einen gewissen Referenzwert hat

Dieser Artikel gehört zur Verbesserung des nodejs+websocket Echtzeit-Chat-System. Der spezifische Inhalt ist wie folgt

Ich bin auch wirklich gut darin, ich habe so viele Tage an einem einfachen Websocket-Chat-System gearbeitet.

Es scheint, dass ich in Zukunft mehr Code schreiben muss.

client.html:

<!DOCTYPE html>
<html lang="en">

<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>Document</title>
 <style>
 .kuang {
  width: 600px;
  min-height: 50px;
  max-height: 296px;
  border: 1px solid;
  float: left;
  display: block;
  position: relative;
  overflow-y: scroll;
 }

 .value {
  width: 200px;
 }

 .input {
  display: block;
  position: absolute;
  left: 0;
  margin-top: 300px;
 }
 </style>
</head>

<body>
 <label>连接用户:</label>
 <input type="text" id="name" />
 <button id="conn">连接</button>
 <button id="close">断开</button><br/><br/>
 <p class="kuang" id="mess"></p>
 <p class="input">
 <input type="text" class="value" id="value1" />
 <button id="send">发送</button>
 </p>
 <script>
 var input = document.getElementById("name");
 var conn = document.getElementById("conn");
 var close = document.getElementById("close");
 var mess = document.getElementById("mess");
 var value1 = document.getElementById("value1");
 var pattern = /^[\u4e00-\u9fa5]{2,10}$/;

 close.disabled = true;
 if (window.WebSocket) {
  conn.onclick = function () {
  if (!pattern.test(input.value)) {
   alert("名称不能为空且必须为中文");
   return;
  }
  var ws = new WebSocket(&#39;ws://127.0.0.1:8082&#39;);
  conn.disabled = true;
  close.disabled = false;
  ws.onopen = function (e) {
   console.log("连接服务器成功");
   ws.send(input.value);
   input.setAttribute("readOnly", &#39;true&#39;);
   value1.setAttribute("readOnly", &#39;true&#39;);
  }
  ws.onmessage = function (e) {
   value1.removeAttribute("readOnly");
   var time = new Date();
   mess.innerHTML += time.toUTCString() + ":" + e.data + "<br>";
   document.getElementById("send").onclick = function (e) {
   ws.send(input.value + "说:" + value1.value);
   value1.value = " ";
   }
   document.onkeydown = function (e) {
   e = e || window.event;
   if (e.keyCode == 13) {
    document.getElementById("send").onclick();
    return false;
   }
   }
  }
  ws.onclose = function (e) {
   console.log("服务器关闭");
  }
  ws.onerror = function () {
   console.log("连接出错");
  }
  /**
   * 客户端主动断开连接
   * 
   * **/
  close.onclick = function () {
   ws.onclose();
   ws.send(input.value + &#39;close&#39; + "了连接");
   input.removeAttribute("readOnly");
   conn.disabled = false;
   close.disabled = true;
  }

  }

 }
 </script>
</body>

</html>

Nach dem Login kopieren

Ich kann nur sagen, dass die Schnittstelle hässlich ist und ignoriere sie.
server.js:

var ws = require("nodejs-websocket");
console.log("开始建立连接...");
var str1 = null, str2 = null, clientReady = false, serverReady = false;
var a = [];
var server = ws.createServer(function (conn) {
 conn.on(&#39;text&#39;, function (str) {
 a.push(str);
 if (!clientReady) {
  if (a[0] === str) {
  str1 = conn;
  clientReady = true;
  str1.sendText("欢迎你" + str);

  }
 } else if (!serverReady) {
  if (str.indexOf(&#39;close&#39;) >= 0) {
  a.splice(2, 1);
  clientReady = false;
  str1 = null;
  return;
  }
  if (a[1] === str) {
  str2 = conn;
  serverReady = true;
  str2.sendText("欢迎你" + str);
  str1.sendText(str + "在线啦，你们可以聊天啦");
  return;
  }
 } else if (clientReady && serverReady) {
  str2.sendText(str);
  str1.sendText(str);
  if (str.indexOf(&#39;close&#39;) >= 0) {
  a.splice(2, a.length);
  var len = a.length;
  for (var i = 0; i < len; i++) {
   // 定位该元素位置
   if (str.indexOf(a[i]) >= 0) {
   a.splice(i, 1);
   if (i == 0) {
    str1 = str2;
   }
   serverReady = false;
   str2 = null;
   return;
   }

  }
  }
 }
 })

 conn.on("close", function (code, reason) {
 console.log("关闭连接");
 clientReady = false;
 serverReady = false;
 })
 conn.on("error", function (code, reason) {
 console.log("异常关闭");
 });
}).listen(8082);
console.log("websocket连接完毕")

Nach dem Login kopieren

Ein einfacher Screenshot zur Veranschaulichung:

Aktivieren Service, führen Sie dieselbe Seite zweimal aus und Sie können chatten. Wie auch immer, das ist der Prozess. Es gibt einfach ein weiteres großes Problem. Ich bin beispielsweise nicht mit A verbunden und nur B ist mit dem Riesen B verbunden. Wenn ich Nachrichten senden kann, wird dies als in Ordnung betrachtet. Tatsächlich erhält b seine eigenen Informationen. Dann kann ich es nicht ertragen.

Das ist alles, die Logik ist völlig durcheinander und die Logik zu klären ist eine gehirnraubende Aufgabe. Gibt es Mitschüler, die es wissen? Wie man damit umgeht

[Verwandte Empfehlungen]

1. Kostenloses Javascript-Video-Tutorial

2 Jetlag-Effekt

Detaillierte Erläuterung der Methode zum rekursiven Löschen von Elementen in einem Array in JS

Detaillierte Erläuterung eines Beispiels von JS, der die Sternebewertungsfunktion abschließt

Js kompletter Countdown-Jetlag-Effekt

Das obige ist der detaillierte Inhalt vonnodejs + websocket vervollständigt eine Chat-Systemfunktion. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!