利用NodeJs+WebSocket做个简单的聊天室

最新推荐文章于 2024-03-04 12:22:37 发布

小柯&java

最新推荐文章于 2024-03-04 12:22:37 发布

阅读量3k

点赞数 9

分类专栏： Node.js 前端文章标签：利用NodeJs+WebSocket做个简单的聊天室

本文链接：https://blog.csdn.net/weixin_43844158/article/details/96711899

版权

前端同时被 2 个专栏收录

9 篇文章 2 订阅

订阅专栏

Node.js

1 篇文章 0 订阅

订阅专栏

WebSocket说明
WebSocket是一种在单个TCP连接上进行全双工通信的协议。
WebSocket使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在WebSocket API中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接（就是客户端和服务器之间搭建了一条高速公路），并进行双向数据传输

Node.js说明
Node.js的本质就是运行在服务端的JavaScript。Node.js是基于Chrome浏览器运行JavaScript时建立的一个平台。该平台可以非常快速以及高效的执行JavaScript，并且性能非常优越。所以本地先要安装node运行环境，然后通过node命令来执行js代码。以达到预期效果。

开发工具用的是：VSCode 版本1.36.1
没有安装node.js和VSCode的
请点击下面的传送门查看
Visual Studio Code安装及语言设置为中文
 安装node.js

1.首先要在你的项目下(下载websocket依赖包)
命令行输入 npm i nodejs-websocket --save 在这里插入图片描述
如果下载不了websocket依赖包，就使用 nrm 切到国内的淘宝源安装
nrm是一个管理npm的工具
nrm 安装也很简单
命令行输入npm i -g nrm （i是insert的缩写，-g是全局安装nrm包）
命令行输入 nrm use taobao (切换到国内的淘宝源)
在这里插入图片描述
然后 nrm ls 查看

前面有颗星号*就证明已经切过去了，可以看到已经切到淘宝源了

2. 下载好后，目录下会多一个node_modules文件夹，这个文件夹下就有websocket依赖包了
在这里插入图片描述
ok,话不多说小二上代码
好嘞！
服务端代码如下：

  var ws=require('nodejs-websocket');
 var server=ws.createServer(function(conn){
   console.log('new connection创建连接成功。。。');
   //用来处理接收客户端的消息
   conn.on('text',function(str){
     console.log(str);

      var data = JSON.parse(str);    
      switch(data.type){
        case 'setname':
          conn.nickname=data.name;
          broadcast(JSON.stringify({
            name: 'Server',
            text: data.name + '加入了房间'        
          }));
           break;
        case 'chat':        
            broadcast(JSON.stringify({
              name: conn.nickname,
              text: data.text    
            }));           
            break;
        default:
            break;
      }
   });
   //当用户关闭网页或者手动关闭网页连接时自动触发
   conn.on('close', function() {    
    broadcast(JSON.stringify({
      name: 'Server',
      text: conn.nickname + '离开了房间'        
    }));
   });
     //error事件这个必须写，否则当客户端关闭时，后端服务器会崩溃
     conn.on('error',function(err){
         console.log(err);
     })
  }).listen(8000); //listen方法设置端口号
  
  //循环将消息广播更新给所有人
  function broadcast(str){
    console.log('进入广播。。。');
    console.log(str);
     //server.connections就是可以拿到所有人数组
     //遍历每一个人发消息
     server.connections.forEach(function(conn) {
       conn.sendText(str);//发送消息给客户端
     })
  }

客户端代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <input type="text" id="name">
    <button id="setname">加入聊天</button>
    <input type="text" id="text">
    <button id="btn" type="button">发送</button> 
    <div id="container">

    </div>
   <script>
        var ws=null;
        
       document.getElementById('setname').onclick = function() {
         var name = document.getElementById('name').value;
          if(name === '')return console.log("名字为空");
           
          ws = new WebSocket('ws://localhost:8000');
           
          //在建立连接时会触发
           ws.onopen = function(){
            //向服务器发送消息
            ws.send(JSON.stringify({
                name:name,
                type:'setname'
            }));
          }

            document.getElementById('btn').onclick = send;
            document.getElementById('text').onkeyup = function(e) {
                if(e.keyCode !== 13) return;
                send();
            }
       
       //自动接收服务器返回的数据
       //e代表一个事件  
       ws.onmessage = function(e){   
          var con = document.getElementById('container');
        
          //insertBefore(要插入的内容，要插入的位置之前)
         con.insertBefore(createChatPanel(JSON.parse(e.data)),con.children[0]);
       }
       //将加入房间按钮设置不可用（只能加入一次）
       document.getElementById('setname').setAttribute('disabled',true);
    }

      function createChatPanel(data) {
            var name = data.name;
            var text = data.text;

            var div = document.createElement('div');
            var span1= document.createElement('span1');
            var span2= document.createElement('span2');

            span1.innerHTML = name + ' ' + new Date().format("yyyy-MM-dd hh:mm:ss");
            span2.innerHTML = text;

            span1.style.color = '#00f';
            span2.style.fontWeight = '900';

            div.appendChild(span1);
            div.appendChild(document.createElement('br'));
            div.appendChild(span2);
            return div;
        }
         //发送消息
          function send() {
            var text=document.getElementById('text');
                if(text.value === '')return;
                ws.send(JSON.stringify({
                 text:text.value,
                 type:"chat"
            }));             
          text.value = '';
          }
    //Date的原型中扩展了format方法，使其可以方便的格式化日期格式输出。
   Date.prototype.format = function(fmt) { 
     var o = { 
        "M+" : this.getMonth()+1,                 //月份 
        "d+" : this.getDate(),                    //日 
        "h+" : this.getHours(),                   //小时 
        "m+" : this.getMinutes(),                 //分 
        "s+" : this.getSeconds(),                 //秒 
        "q+" : Math.floor((this.getMonth()+3)/3), //季度 
        "S"  : this.getMilliseconds()             //毫秒 
    }; 
    if(/(y+)/.test(fmt)) {
            fmt=fmt.replace(RegExp.$1, (this.getFullYear()+"").substr(4 - RegExp.$1.length)); 
    }
     for(var k in o) {
        if(new RegExp("("+ k +")").test(fmt)){
             fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));
         }
     }
    return fmt; 
}     
    </script>
</body>
</html>

效果如下：
在这里插入图片描述

小柯&java

关注

9
点赞
踩
27

收藏

觉得还不错? 一键收藏
3
评论
利用NodeJs+WebSocket做个简单的聊天室

WebSocket说明WebSocket是一种在单个TCP连接上进行全双工通信的协议。WebSocket使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在WebSocket API中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接（就是客户端和服务器之间搭建了一条高速公路），并进行双向数据传输Node.js说明Node.js的本质就是运行...
复制链接

扫一扫

专栏目录