简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Maison > interface Web > js tutoriel > le corps du texte

Comment implémenter la fonction de chat à l'aide de nodejs ?

亚连
Libérer： 2018-06-12 13:33:48
original
2818 Les gens l'ont consulté

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

L'exemple de cet article décrit comment nodejs implémente la fonction de chat WebSocket basée sur le module WS. Partagez-le avec tout le monde pour référence, les détails sont les suivants :

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
Copier après la connexion

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('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('刷新页面了');
    }
  });
});
Copier après la connexion
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>
Copier après la connexion
Il n'y a pas beaucoup de vérification effectuée dans le chat, et le le nom peut être modifié à volonté.

Ce qui précède est ce que j'ai compilé pour tout le monde. J'espère que cela sera utile à tout le monde à l'avenir.

Articles connexes :

À propos de l'utilisation du modèle ejsExcel

Composant NavigatorIOS dans React Native (description détaillée du didacticiel)

Description détaillée de l'abstraction entre les composants dans React

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!

Étiquettes associées：
nodejs websocket 聊天功能
source：php.cn
Article précédent：Concernant les problèmes liés à Vue.use dans axios Article suivant：Comment optimiser le packaging pour webpack 4.0
Déclaration de ce site Web
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
Derniers articles par auteur
Derniers numéros
Une erreur se produit lors de l'utilisation de NodeJS pour se connecter à MySQL dans Docker J'ai créé un serveur backend NodeJS connecté à MySQL. À l'aide de Docker, j'ai créé une im...
Depuis 2024-04-06 12:07:19
0
1
415
React/Node : erreur d'intégration rencontrée lors de l'abonnement à l'aide de Trial_period_days J'ai un produit défini dans Stripe que je souhaite configurer comme un essai gratuit de 7 ...
Depuis 2024-04-04 20:30:57
0
1
320
next ne fonctionne pas correctement dans le middleware utilisant Nodejs Je travaille avec Nodejs et j'utilise expressjs et maintenant je travaille sur la fonction...
Depuis 2024-04-04 17:33:56
0
1
340
Un simple programme Hello World crée plusieurs instances de nœuds Je suis très nouveau sur Javascript et NodeJS. J'exécute un simple programme helloworld co...
Depuis 2024-04-04 11:03:22
0
1
310
La requête SQL n'apparaît pas sur un itinéraire spécifique dans Node.js Je suis nouveau sur javascript et nodejs et j'ai une question. J'ai un code dans lequel je...
Depuis 2024-04-04 00:24:22
0
1
344
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois：Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！