用node.js建自己的个人聊天网站（五）

alltolove

昨天建的网站比较丑，今天加点样式。另外接收端框里的字多了就看不到后面的了，今天我们修复它。我在讲讲怎么在局域网里能访问到我们建的网站。

<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
  <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

把以上3句代码放到index.ejs文件的head标签里，你的网页就会自动改变样式，他会自动上网查找相应的模块给网页引入该文件。

打开websocket服务器端，我们要从后端修改下代码，让它对数据做一下处理，修改为以下代码：

var WebSocketServer=require('ws').Server;
wss=new WebSocketServer({port:3000});
var msg='';
wss.on('connection',function(ws){
    ws.on('message',function (message) {
        console.log(message);//服务器端接收
        msg+=message+"<br><br>";
    });
    function cut(){
        a = msg.split('<br><br>');
        a.shift();
        msg=a.join('<br><br>');
    }
    if(msg.length>100){
        cut();
    }
    ws.send(msg);//向客户端发送
});

这个代码的意思是，如果我们打的字多于100个，就自动删除一行，让我们的聊天内容一直保持在那个框框里。这样既能让我们看到聊天内容，也减轻了服务器的负载。

bug现在也处理完了，下面我说说如何在局域网里能访问网站。
在运行里键入cmd打开dos命令行模式，然后输入ipconfig命令（linux系统下好像是ifconfig吧？）

红框框里就是你的局域网ip地址，你只要在跟你的电脑同一个路由器下的任何一台电脑里（如果是无线路由手机wify什么的也行）网页地址栏输入这个ip就能访问到你的网站，例如下图：

因为我们用的是80端口，这是系统默认端口可以不用写上也行。
所以我们的websocket服务器接收端跟发送端网页里的地址也要改成那个ip才能在局域网里使用，为了省事我就把其中一行代码贴出来，你自己找去。

ws=new WebSocket('ws://192.168.1.103:3000');

这样我们就完成了所有网站的制作工序，还真挺累的。其实js代码应该单起一个文件跟html隔离，我为了学习方便所以就都放一起了。 在平时工作中一般不用js原生代码去敲程序，差不多都是用jquery，不是因为省事，而是能兼容差不多所有网页，另外维护起来也方便。你打一堆密密麻麻的代码是显示你厉害了，可别人怎么办，还得一行一行去查。这如果用jquery就几行代码完事，所以我不推荐大家直接用js原生代码。现在咱们主要是学习。

alltolove

呃，对了。我再介绍个小技巧，我们已经建成的网站可以进行局域网的文件传输。把你要传输的文件放paste到public文件里（一定要进入webstorm里再粘贴，否则没作用），然后把index.ejs里写上一个a标签

<a href="你的文件">文件</a>

在别的电脑上直接点击这个超链，就可以下载了。（最好把文件压缩成zip格式）以后你的手机就不用连根数据线从电脑上复制东西了