alltolove 发表于 2017-6-5 06:35:11

用node.js建自己的个人聊天网站(五)

昨天建的网站比较丑,今天加点样式。另外接收端框里的字多了就看不到后面的了,今天我们修复它。我在讲讲怎么在局域网里能访问到我们建的网站。
<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 发表于 2017-6-5 06:44:01

本帖最后由 alltolove 于 2017-6-5 06:45 编辑

呃,对了。我再介绍个小技巧,我们已经建成的网站可以进行局域网的文件传输。把你要传输的文件放paste到public文件里(一定要进入webstorm里再粘贴,否则没作用),然后把index.ejs里写上一个a标签<a href="你的文件">文件</a>在别的电脑上直接点击这个超链,就可以下载了。(最好把文件压缩成zip格式)以后你的手机就不用连根数据线从电脑上复制东西了
页: [1]
查看完整版本: 用node.js建自己的个人聊天网站(五)