鱼C论坛

 找回密码
 立即注册
查看: 3398|回复: 1

[技术交流] 用node.js建自己的个人聊天网站(五)

[复制链接]
发表于 2017-6-5 06:35:11 | 显示全部楼层 |阅读模式

马上注册,结交更多好友,享用更多功能^_^

您需要 登录 才可以下载或查看,没有账号?立即注册

x
昨天建的网站比较丑,今天加点样式。另外接收端框里的字多了就看不到后面的了,今天我们修复它。我在讲讲怎么在局域网里能访问到我们建的网站。
  1. <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  2.   <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
  3.   <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服务器端,我们要从后端修改下代码,让它对数据做一下处理,修改为以下代码:
  1. var WebSocketServer=require('ws').Server;
  2. wss=new WebSocketServer({port:3000});
  3. var msg='';
  4. wss.on('connection',function(ws){
  5.     ws.on('message',function (message) {
  6.         console.log(message);//服务器端接收
  7.         msg+=message+"<br><br>";
  8.     });
  9.     function cut(){
  10.         a = msg.split('<br><br>');
  11.         a.shift();
  12.         msg=a.join('<br><br>');
  13.     }
  14.     if(msg.length>100){
  15.         cut();
  16.     }
  17.     ws.send(msg);//向客户端发送
  18. });
复制代码

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

bug现在也处理完了,下面我说说如何在局域网里能访问网站。
在运行里键入cmd打开dos命令行模式,然后输入ipconfig命令(linux系统下好像是ifconfig吧?)
dfssfsdf.png
红框框里就是你的局域网ip地址,你只要在跟你的电脑同一个路由器下的任何一台电脑里(如果是无线路由手机wify什么的也行)网页地址栏输入这个ip就能访问到你的网站,例如下图:
asasi.png
因为我们用的是80端口,这是系统默认端口可以不用写上也行。
所以我们的websocket服务器接收端跟发送端网页里的地址也要改成那个ip才能在局域网里使用,为了省事我就把其中一行代码贴出来,你自己找去。
  1. ws=new WebSocket('ws://192.168.1.103:3000');
复制代码

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

本帖被以下淘专辑推荐:

想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

 楼主| 发表于 2017-6-5 06:44:01 | 显示全部楼层
本帖最后由 alltolove 于 2017-6-5 06:45 编辑

呃,对了。我再介绍个小技巧,我们已经建成的网站可以进行局域网的文件传输。把你要传输的文件放paste到public文件里(一定要进入webstorm里再粘贴,否则没作用),然后把index.ejs里写上一个a标签
  1. <a href="你的文件">文件</a>
复制代码
在别的电脑上直接点击这个超链,就可以下载了。(最好把文件压缩成zip格式)以后你的手机就不用连根数据线从电脑上复制东西了
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2024-3-29 01:12

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表