Home >Web Front-end >JS Tutorial >nodejs+websocket completes a chat system function

nodejs+websocket completes a chat system function

Y2JOriginal: 2017-05-20 13:22:112425browse

This article mainly introduces the improved version of nodejs+websocket real-time chat system, which has certain reference value. Interested friends can refer to it

This article belongs to the improvement of nodejs+websocket real-time chat system Version, the specific content is as follows

I am also really good at it. I have been working on a simple websocket chat system for so many days.

It seems that I still have to write more code in the future.

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>

I can only say that the interface is ugly and ignore it.
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连接完毕")

A simple screenshot to explain:

##Start the service, Execute the same page twice and you can chat. Anyway, that's the process. There is just another big problem. For example, I am disconnected from A, and only B is connected to the giant. B can still send messages. If I can send messages, it is considered okay. Actually b receives his own information. Then I can't bear it.

That's it. The logic is all messed up. It's a brain-consuming thing to sort out the logic. Are there any classmates who know? How to deal with it

[Related recommendations]

Javascript free video tutorial

Js complete countdown jet lag effect

Detailed explanation of the method of recursively deleting elements in an array in JS

Detailed explanation of an example of JS completing the star rating function

Js complete countdown time difference effect

The above is the detailed content of nodejs+websocket completes a chat system function. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Share an example tutorial on using the koa2 framework in nodejsNext article：Share an example tutorial on using the koa2 framework in nodejs

See more

nodejs+websocket completes a chat system function

Related articles