Wie implementiert man eine Chat-Funktion mit NodeJS?-js-Tutorial-php.cn

Wie implementiert man eine Chat-Funktion mit NodeJS?

亚连

Freigeben： 2018-06-12 13:33:48

Original

2838 Leute haben es durchsucht

In diesem Artikel wird hauptsächlich die Methode von nodejs zur Implementierung der WebSocket-Chat-Funktion basierend auf dem WS-Modul vorgestellt. Er analysiert die spezifischen Betriebsfähigkeiten von nodejs, die das WS-Modul für die WebSocket-Kommunikation verwenden, um die Chat-Funktion in Form von Beispielen zu implementieren Bedürftige können darauf verweisen

Das Beispiel in diesem Artikel beschreibt, wie nodejs die WebSocket-Chat-Funktion basierend auf dem WS-Modul implementiert. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Es gibt viele WebSocket-Module. Ich habe mich für ein einfacheres Modul zur Implementierung entschieden.

Tool: Sublime

Technologie: Node.js Referenzmodul ws

Der Endeffekt ist wie folgt

Ursprünglich geplant, ein Netzwerk-Zeichenbrett zu erstellen, habe ich es aufgrund der Arbeit vergessen, also habe ich hier einfach die Gruppenchat-Funktion implementiert

Es gibt nichts einzuführen, es gibt zu viele Codefälle im Internet (die wichtigsten). Das Problem, auf das Anfänger stoßen, kann das Problem des Knotenimportmoduls sein. )

Stellen Sie das Installationsmodul vor:

Suchen Sie das Installationsknotenverzeichnis, geben Sie das npm-Verzeichnis ein, führen Sie cmd aus und geben Sie

npm install --save ws

Nach dem Login kopieren

< ein 🎜>Was die Quelldatei betrifft, legen Sie sie am besten im npm-Verzeichnis ab. Sie können sie zitieren (ich bin auch ein Neuling, bitte verzeihen Sie mir)

Führen Sie dann die Knotenquelldatei.js aus, um darauf zuzugreifen 🎜>
Quellcode: Einfach als js-Datei speichern

//https://github.com/websockets/ws/blob/master/doc/ws.md#new-wsserveroptions-callback
var WebSocketServer = require(&#39;ws&#39;).Server,
  wss = new WebSocketServer({
    port: 3000, //监听接口
    verifyClient: socketVerify //可选，验证连接函数
  });
function socketVerify(info) {
  console.log(info.origin);
  console.log(info.req.t);
  console.log(info.secure);
  // console.log(info.origin);
  // var origin = info.origin.match(/^(:?.+\:\/\/)([^\/]+)/);
  //if (origin.length >= 3 && origin[2] == "blog.luojia.me") {
  //  return true; //如果是来自blog.luojia.me的连接，就接受
  //}
  // console.log("连接",origin[2]);
  return true; //否则拒绝
  //传入的info参数会包括这个连接的很多信息，你可以在此处使用console.log(info)来查看和选择如何验证连接
}
//广播
wss.broadcast = function broadcast(s,ws) {
  // console.log(ws);
  // debugger;
  wss.clients.forEach(function each(client) {
    // if (typeof client.user != "undefined") {
      if(s == 1){
        client.send(ws.name + ":" + ws.msg);
      }
      if(s == 0){
        client.send(ws + "退出聊天室");
      }
    // }
  });
};
// 初始化
wss.on(&#39;connection&#39;, function(ws) {
  // console.log(ws.clients.session);
  // console.log("在线人数", wss.clients.length);
  ws.send(&#39;你是第&#39; + wss.clients.length + &#39;位&#39;);
  // 发送消息
  ws.on(&#39;message&#39;, function(jsonStr,flags) {
    var obj = eval(&#39;(&#39; + jsonStr + &#39;)&#39;);
    // console.log(obj);
    this.user = obj;
    if (typeof this.user.msg != "undefined") {
      wss.broadcast(1,obj);
    }
  });
  // 退出聊天
  ws.on(&#39;close&#39;, function(close) {
    try{
      wss.broadcast(0,this.user.name);
    }catch(e){
      console.log(&#39;刷新页面了&#39;);
    }
  });
});

Nach dem Login kopieren

html Front-End-Quellcode:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>聊天</title>
  <link rel="stylesheet" href="">
  <script language="JavaScript" src="http://code.jquery.com/jquery-1.11.0.js"></script>
  <script type="text/javascript">
  </script>
</head>
<style type="text/css" media="screen">
p {
  border: 1px solid #cccccc;
  width: 500px;
  min-height: 100px;
}
</style>
<body>
  <p id="show">
  </p>
  <input type="text" id="message" name="" value="" placeholder="">
  <input type="text" id="name" value="" placeholder="昵称;">
  <a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" onclick="send()">发送</a>
  <a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" onclick="exit()">退出</a>
  <!-- <input type="text" id="token" name="" value="" placeholder="" readonly="false"> -->
</body>
<script type="text/javascript">
var ws = new WebSocket("ws://127.0.0.1:3000?t=test");
ws.onopen = function() {
  console.log("连接状态", ws);
  $("#show").html("连接状态;" + ws.readyState + "</br>");
  console.log("open");
  ws.open("start");
};
ws.onmessage = function(evt) {
  // console.log(evt.data)
  // alert(evt.data);
  $("#show").append(evt.data + "</br>");
};
ws.onclose = function(evt) {
  console.log("WebSocketClosed!");
  console.log(evt);
};
ws.onerror = function(evt) {
  console.log("WebSocketError!");
};
function send() {
  var msg = $("#message").val();
  var key = $("#token").val();
  var name = $("#name").val();
  var str = "{name:&#39;" + name + "&#39;,msg:&#39;" + msg + "&#39;,key:&#39;" + key + "&#39;}";
  console.log("发送", str);
  ws.send(str);
};
function exit() {
  var r = ws.close();
  console.log("退出", r);
}
</script>
</html>

Nach dem Login kopieren

Es gibt nicht viel Überprüfung im Chat, und der Name kann sein nach Belieben geändert.

Das Obige habe ich für alle zusammengestellt. Ich hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

Informationen zur Verwendung der ejsExcel-Vorlage

NavigatorIOS-Komponente in React Native (ausführliche Tutorialbeschreibung)

Detaillierte Beschreibung der Abstraktion zwischen Komponenten in React

Das obige ist der detaillierte Inhalt vonWie implementiert man eine Chat-Funktion mit NodeJS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!