suchen

Heim >Web-Frontend >js-Tutorial >nodejs implementiert die WebSocket-Chat-Funktion basierend auf dem WS-Modul

nodejs implementiert die WebSocket-Chat-Funktion basierend auf dem WS-Modul

小云云
小云云Original
2018-05-14 16:45:454645Durchsuche

In diesem Artikel wird hauptsächlich die auf dem WS-Modul basierende Methode zur Implementierung der WebSocket-Chat-Funktion vorgestellt. Er analysiert die spezifischen Betriebsfähigkeiten von NodeJS, die das WS-Modul für die WebSocket-Kommunikation verwenden, um die Chat-Funktion zu implementieren Wer es braucht, kann darauf zurückgreifen. Ich hoffe, es kann jedem helfen.

Es gibt viele WebSocket-Module, ich habe mich für die Implementierung eines einfacheren Moduls 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
Was die Quelldatei betrifft, legen Sie sie am besten im npm-Verzeichnis ab (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

HTML-Frontend-Quellcode: 
//https://github.com/websockets/ws/blob/master/doc/ws.md#new-wsserveroptions-callback
var WebSocketServer = require('ws').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('connection', function(ws) {
  // console.log(ws.clients.session);
  // console.log("在线人数", wss.clients.length);
  ws.send('你是第' + wss.clients.length + '位');
  // 发送消息
  ws.on('message', function(jsonStr,flags) {
    var obj = eval('(' + jsonStr + ')');
    // console.log(obj);
    this.user = obj;
    if (typeof this.user.msg != "undefined") {
      wss.broadcast(1,obj);
    }
  });
  // 退出聊天
  ws.on('close', function(close) {
    try{
      wss.broadcast(0,this.user.name);
    }catch(e){
      console.log('刷新页面了');
    }
  });
});

Es gibt nicht viel Überprüfung im Chat, der Name schon nach Belieben geändert werden, 
<!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>

Verwandte Empfehlungen:


JS-Originalton zur Implementierung der einfachen WeChat-Chat-Funktion

ausführliche Erklärung node.js + socket.io zur Implementierung der Chat-Funktion

So verwenden Sie nodejs zur Implementierung der Chat-Funktion

Das obige ist der detaillierte Inhalt vonnodejs implementiert die WebSocket-Chat-Funktion basierend auf dem WS-Modul. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

node.js html npm JS websocket
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Nodejs kombiniert Socket.IO, um die Instant-Messaging-Funktion zu realisierenNächster Artikel：Nodejs kombiniert Socket.IO, um die Instant-Messaging-Funktion zu realisieren

In Verbindung stehende Artikel

Mehr sehen