码迷，mamicode.com
首页 > Web开发 > 详细

WebSocket入门教程（五）-- WebSocket实例：简单多人聊天室

时间：2018-03-29 12:09:12      阅读：218      评论：0      收藏：0      [点我收藏+]

标签：csdn   bootstra   sso   cdn   type   init   分享图片   close   ofo   

from:https://blog.csdn.net/u010136741/article/details/51612594

【总目录】

 
 

【实例简介】

 
    本文，我们通过nodejs和javascript实现一个网页聊天室的demo。主要包括，聊天，改用户名，查看其他用户在线状态的功能。大致流程为，用户访问网页，即进入聊天状态，成为新游客，通过底部的输入框，可以输入自己想说的话，点击发布，信息呈现给所有在聊天的人的页面。用户可以实时修改自己的昵称，用户离线上线都会实时广播给其他用户！
 

【效果图】

 
技术分享图片
 
 

【客户端】

 
    web页面主要呈现在线人数，聊天信息，一个输入框和发送按钮，上代码:
 
[html] view plain copy
 
  1. <!DOCTYPE html>  
  2. <html lang="cn">  
  3. <head>  
  4.     <title>WebSocket chart application</title>  
  5.     <meta charset="utf-8">  
  6.     <meta name="viewport" content="width=device-width, initial-scale=1">  
  7.     <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/4.0.0-alpha.2/css/bootstrap.css">  
  8.     <link rel="stylesheet" href="http://cdn.bootcss.com/tether/1.3.2/css/tether.css"/>  
  9.     <script src="http://cdn.bootcss.com/jquery/2.2.4/jquery.js" ></script>  
  10.     <script src="http://cdn.bootcss.com/tether/1.3.2/js/tether.js"></script>  
  11.     <script src="http://cdn.bootcss.com/bootstrap/4.0.0-alpha.2/js/bootstrap.js"></script>  
  12.     <script>  
  13.         var ws= new WebSocket(‘ws://www.liumumu.top:8180‘);  
  14.         var nickname;  
  15.         ws.onopen = function(e){  
  16.             console.log(‘Connection to server opened‘);  
  17.         }  
  18.         function appendLog(type,nickname, message,clientcount) {  
  19.                 var messages = document.getElementById(‘messages‘);  
  20.                 var messageElem = document.createElement("li");  
  21.                 var preface_label;  
  22.             if(type===‘notification‘) {  
  23.                         preface_label = "<span class=\"label label-info\">*</span>";  
  24.                     } else if(type===‘nick_update‘) {  
  25.                         preface_label = "<span class=\"label label-warning\">*</span>";  
  26.                     } else {  
  27.                         preface_label = "<span class=\"label label-success\">" + nickname + "</span>";  
  28.                     }  
  29.                 var message_text = "<h2>" + preface_label + "  " + message + "</h2>";  
  30.                 messageElem.innerHTML = message_text;  
  31.                 messages.appendChild(messageElem);  
  32.             var count_people = document.getElementById("count_people");  
  33.                         count_people.innerHTML = clientcount;  
  34.   
  35.             }  
  36.         ws.onmessage = function(e){  
  37.             var data = JSON.parse(e.data);  
  38.             nickname = data.nickname;  
  39.                 appendLog(data.type,data.nickname, data.message,data.clientcount);  
  40.                 console.log("ID: [%s] = %s", data.id, data.message);  
  41.   
  42.   
  43.         }  
  44.         function sendMessage(){  
  45.             var message = $(‘#message‘).val().trim();  
  46.             if(message.length<1){  
  47.                 alert("不能发送空内容！");  
  48.                 return;  
  49.             }  
  50.             ws.send($(‘#message‘).val());  
  51.             $(‘#message‘).val("");  
  52.             $(‘#message‘).focus();  
  53.             console.log(ws.bufferedAmount);  
  54.         }  
  55.     </script>  
  56. </head>  
  57. <body lang="cn">  
  58.     <div class="vertical-center">  
  59.     <div class="container">  
  60.         <h2>多人在线聊天DEMO</h2>  
  61.     <hr />  
  62.     <p>当前在线人数：<span id="count_people">0</span></p>  
  63.     <ul id="messages" class="list-unstyled">  
  64.   
  65.         </ul>  
  66.         <hr />  
  67.     <form role="form" id="chat_form" onsubmit="sendMessage(); return false;">  
  68.             <div class="form-group">  
  69.                 <input class="form-control" type="text" name="message" id="message"  
  70.                     placeholder="输入聊天内容" value="" autofocus/>  
  71.             </div>  
  72.             <button type="button" id="send" class="btn btn-primary"  
  73.           onclick="sendMessage();">发送!</button>  
  74.     </form>  
  75.     </div>  
  76.     </div>  
  77. </body>  
  78. </html>  
    
    javascript 部分，连接websocket成功之后，主要是监听数据返回，和发送数据。
    当用户编辑好内容，点击发送按钮是调用sendMessage方法，发送数据，如果需要修改昵称，则发送数据格式为"/nick 昵称"。
   当服务器返回数据到客户端，我们通过appendLog方法对数据做处理，根据type字段，判断是显示用户离线在线信息，还是显示聊天信息。最后更新在线人数。
 

【服务器端】

 
    服务器端主要是接收信息，判断是聊天信息还是重命名信息，然后发送广播。同时，当用户连接上服务器端或者关闭连接时，服务器也会发送广播通知其他用户。
[javascript] view plain copy
 
  1. var WebSocket = require(‘ws‘);  
  2. var WebSocketServer = WebSocket.Server,  
  3.     wss = new WebSocketServer({port: 8180});  
  4. var uuid = require(‘node-uuid‘);  
  5.   
  6. var clients = [];  
  7.   
  8. function wsSend(type, client_uuid, nickname, message,clientcount) {  
  9.   for(var i=0; i<clients.length; i++) {  
  10.     var clientSocket = clients[i].ws;  
  11.     if(clientSocket.readyState === WebSocket.OPEN) {  
  12.       clientSocket.send(JSON.stringify({  
  13.         "type": type,  
  14.         "id": client_uuid,  
  15.         "nickname": nickname,  
  16.         "message": message,  
  17.         "clientcount":clientcount,  
  18.       }));  
  19.     }  
  20.   }  
  21. }  
  22.   
  23. var clientIndex = 1;  
  24.   
  25. wss.on(‘connection‘, function(ws) {  
  26.   var client_uuid = uuid.v4();  
  27.   var nickname = "游客"+clientIndex;  
  28.   clientIndex+=1;  
  29.   clients.push({"id": client_uuid, "ws": ws, "nickname": nickname});  
  30.   console.log(‘client [%s] connected‘, client_uuid);  
  31.   
  32.   var connect_message = nickname + " 来了";  
  33.   wsSend("notification", client_uuid, nickname, connect_message,clients.length);  
  34.   
  35.   ws.on(‘message‘, function(message) {  
  36.     if(message.indexOf(‘/nick‘) === 0) {  
  37.       var nickname_array = message.split(‘ ‘);  
  38.       if(nickname_array.length >= 2) {  
  39.         var old_nickname = nickname;  
  40.         nickname = nickname_array[1];  
  41.         var nickname_message = "用户 " + old_nickname + " 改名为： " + nickname;  
  42.         wsSend("nick_update", client_uuid, nickname, nickname_message,clients.length);  
  43.       }  
  44.     } else {  
  45.       wsSend("message", client_uuid, nickname, message,clients.length);  
  46.     }  
  47.   });  
  48.   
  49.   var closeSocket = function(customMessage) {  
  50.     for(var i=0; i<clients.length; i++) {  
  51.         if(clients[i].id == client_uuid) {  
  52.             var disconnect_message;  
  53.             if(customMessage) {  
  54.                 disconnect_message = customMessage;  
  55.             } else {  
  56.                 disconnect_message = nickname + " 走了";  
  57.             }  
  58.   
  59.           clients.splice(i, 1);  
  60.           wsSend("notification", client_uuid, nickname, disconnect_message,clients.length);  
  61.         }  
  62.     }  
  63.   }  
  64.   ws.on(‘close‘, function() {  
  65.       closeSocket();  
  66.   });  
  67.   
  68.   process.on(‘SIGINT‘, function() {  
  69.       console.log("Closing things");  
  70.       closeSocket(‘Server has disconnected‘);  
  71.       process.exit();  
  72.   });  
  73. });  

    我们定义了wsSend函数用来处理消息的广播。对每个连接的用户，我们默认给他分配为游客。为了实现广播，我们用clients数组来保存连接的用户。

WebSocket入门教程（五）-- WebSocket实例：简单多人聊天室

标签：csdn   bootstra   sso   cdn   type   init   分享图片   close   ofo   

原文地址：https://www.cnblogs.com/liuqiyun/p/8668576.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！