• 之前我弄了一个 匿名聊天 有人问我怎么弄的加密WS,其实很简单,只要几行代码,并不需要 kirito 那样反向代理,这样服务端将无法获取用户的IP地址,遇到刷屏/故意捣乱的用户就没有办法了。 我把注释写全,方便小白。 首先是 服务端源码:

    var numUsers = 0; //已连接的用户
    //如果不需要加密链接,请删掉下面5行
    var fs = require('fs');
    var options = {
    key: fs.readFileSync('/path/to/SSLKey'), //SSL密钥路径 
    cert: fs.readFileSync('/path/to/SSLCert') //SSL证书路径
    };
    
    var ws = require('https').createServer(options); 
    //如果不需要加密链接 请将上一行改为 var ws = require('http');
    
    var io = require('socket.io')(ws);
    
    ws.listen(监听端口);
    
    io.on('connection',function(socket){
    numUsers++; //新用户连接
    socket.emit('msg',"欢迎来到聊天室");
    
    var ip = socket.handshake.address; //获取客户端IP地址
    var b ="0.0";
    var a=ip.lastIndexOf(".");
    b=ip.substr(0,a);
    var c=b.lastIndexOf(".");
    b=b.substr(0,c);//去掉C和D段
    
    io.emit('msg',b + '.*.* 已经加入到服务器。 当前在线人数 ' + numUsers); //用户加入公告
    socket.on('msg', function(msg){
      if(!msg){ return; }//禁止发送空消息
          console.log(ip + ': ' + msg); //在控制台输出完整IP  
      io.emit('msg',b+ '.*.* : '+ msg); //显示聊天信息
     });
    console.log(ip + 'connected');
    socket.on('disconnect', function(){
      numUsers = numUsers - 1;//减少当前用户
      io.emit('msg', b + '.*.* 已经断开连接。 当前在线人数 ' + numUsers);//用户离开公告
          console.log(ip + ' disconnected');
      });
    });
    

    为了使其在后台运行 创建一个 Screen screen -S chat 运行服务器 node 文件名

    这样我们的聊天服务器就架设并启动完成了,但是还没发收发消息,因为我们需要一个客户端界面。 一般情况下服务器已经有 nginx 等服务端程序占用80端口,所以监听端口建议选择一个高位。

    <!doctype html>
    <html>
      <head>
        <title>TChat Test</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <style>
          * { margin: 0; padding: 0; box-sizing: border-box; }
          body { font: 13px Helvetica, Arial;}
          form { background: #000; padding: 3px; position: fixed; bottom: 0; width: 100%;height:40px; }
          form input { border: 0; padding: 10px; width: 70%; height:20px; }
          #messages { list-style-type: none; margin-bottom:100px; padding: 0; }
    
          .bubble { margin:0px auto; width:320px; }
          #messages li  {
              display:block;
              height:auto;
              position:relative;
              margin-bottom:20px;
              padding-left:20px;
              padding-right:20px;
              clear: both;
          }
    
          .triangle { /* 气泡左边的小三角 */
              position:absolute;
              margin-top:5px;
              left:12px;
              display:block;
              width:0;
              height:0;
              overflow:hidden;
              line-height:0;
              font-size:0;
              border-bottom:8px solid #FFF;
              border-top:8px solid #FFF;
              border-left:none;
              border-right:8px solid #3079ED;
          }
    
          #messages li .article {  /* 气泡 */
              float:left;
              color:#FFF;
              display:inline-block;
              *display:inline; zoom:1;
              word-break: break-all;
              padding:5px 10px;
              border:1px solid #3079ED;
              background:#eee;
              border-radius:5px;
              background-color: #4D90FE;
              background-image:-webkit-gradient(linear,left top,left bottom,from(#4D90FE),to(#4787ED));
              background-image:-webkit-linear-gradient(top,#4D90FE,#4787ED);
              background-image:-moz-linear-gradient(center top , #4D90FE, #4787ED);
              background-image:linear-gradient(top,#4D90FE,#4787ED);
    
          }
    
          .fr { padding-left:0px; padding-right:50px; }
    
          .fr .triangle {
              left:auto;
              right:42px;
              border-bottom:8px solid #FFF;
              border-top:8px solid #FFF;
              border-right:none;
              border-left:8px solid #3079ED;
          }
    
          .fr .article {
              float:right;
          }
          .smb {
            background-color:#4d91fe;
            display:inline-block;
            cursor:pointer;
            color:#ffffff;
            font-family:arial;
            font-size:17px;
            height:20px;
            text-decoration:none;
          } /* 发送按钮 */
          .smb:hover {
            background-color:#3888ff;
          }
        </style>
      </head>
      <body>
        <ul id="messages"></ul>
        <form action="#">
          <center>
          <input id="m" autocomplete="off" />
          <a href="#" class="smb">Submit</a>
          </center>
        </form>
        <script src="/js/socket.io.js"></script> //下载地址 http://cdn2.eqoe.cn/js/socket.io.js 如果使用加密连接请不要直接引用
        <script src="/js/jquery-1.8.3.min.js"></script> //JQuery不需要提供了吧?
        <script>
          var socket = io('https或http://服务器IP:服务器端口');
          $('.smb').click(function(){ //点击发送按钮事件
            socket.emit('msg', $('#m').val());
            $('#m').val('');
            return false;
          });
          $('form').submit(function(){//回车按钮事件
            socket.emit('msg', $('#m').val());
            $('#m').val('');
            return false;
          });
          socket.on('msg', function(msg){//接受到消息事件
            var ele = $('<div>').text(msg);
            ele.addClass("article");
            var li = $('<li>').append('<br><span class="triangle"></span>');
            li.append(ele);
            $('#messages').append(li);
            $("html, body").animate({ scrollTop: $(document).height() }, "slow");
          });
        </script>
      </body>
    </html>