Maison > Article > interface Web > nodejs implémente la fonction de chat WebSocket basée sur le module WS

nodejs implémente la fonction de chat WebSocket basée sur le module WS

小云云original: 2018-05-14 16:45:454618parcourir

Cet article présente principalement la méthode de nodejs basée sur le module WS pour implémenter la fonction de chat WebSocket. Il analyse les compétences opérationnelles spécifiques de nodejs utilisant le module WS pour la communication WebSocket pour implémenter la fonction de chat sous forme d'exemples. ceux qui en ont besoin peuvent s'y référer. J'espère que cela pourra aider tout le monde.

Il existe de nombreux modules WebSocket, j'ai choisi un module plus simple à implémenter.

Outil : Sublime

Technologie : Node.js Module de référence ws

L'effet final est le suivant

Initialement prévu pour faire une planche à dessin Network, je l'ai oublié à cause du travail, alors ici j'ai simplement implémenté la fonction de chat de groupe

Il n'y a rien à présenter, il y a trop de cas de code sur Internet, (le principal le problème rencontré par les novices peut être le problème du module d'importation de nœud)

Présentez le module d'installation :

Trouvez le répertoire du nœud d'installation, entrez dans le répertoire npm, exécutez cmd et entrez

npm install --save ws

Quant au fichier source, il est préférable de le placer dans le répertoire npm (je suis aussi un débutant, pardonnez-moi)
Exécutez ensuite le nœud source file.js pour y accéder ;

Code source : enregistrez-le simplement en tant que fichier js

//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;);
    }
  });
});

Code source HTML front-end :

<!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>

Il n'y a pas beaucoup de vérification effectuée dans le chat, le nom peut être modifié à volonté,

Recommandations associées :

son original js pour implémenter la fonction de chat WeChat simple

explication détaillée de node.js + socket.io pour implémenter la fonction de chat

Comment utiliser nodejs pour implémenter la fonction de chat

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

node.js html npm JS websocket

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Nodejs combine Socket.IO pour réaliser une fonction de messagerie instantanéeArticle suivant：Nodejs combine Socket.IO pour réaliser une fonction de messagerie instantanée

Articles Liés

Voir plus