开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第二十五天,点击查看活动详情

我用nodejs和vue简单实现了一个局域网聊天平台(一)

🤔为什么要开发这个?

开发这个其实主要是因为自己懒吧,懒得等wechat或者qq什么的,但是有时手机上的资料或者一些内容要传到网上就只能登录他们然后再复制过来什么的,就有点烦,毕竟wechat和qq里面还有其他的人聊天,搞不好被同事看到了就很尴尬,一开始想着用小号就能避免了,但是很多联系人都在大号里面,他们发的文件或者什么的都得copy到小号去,就更麻烦了,我就在想着有没有一种工具或者其他的能局域网通信,能发文件,能发文字,而且关掉服务器后数据就没了(毕竟数据不想保留),我用utools比较多所以在utools里面找,找到了一个局发这个软件,可惜的是我用了半天也不知道怎么搞,最后找其他的开源项目,发现要么太庞大了,要么我改不了源码,所以就想着还不如自己做一个,毕竟自己的需求实现起来应该也不难吧!!!

🖼️效果图

💨启航

📌明确架构

我想着最近在开发utools插件,所以这个程序的架构就简单一点,就vue和nodejs构成,这样也方便前端开发工程师能很快就开发出来了!!!!(毕竟我也是前端开发工程师),常见聊天通信可以直接用websocket,如果刚好想学websocket的开发工程师那就可以好好看看源码了,毕竟我的代码很简单并没有复杂的结果

搭建前端

这里为什么要先搭建前端,可能是因为个人原因吧,个人比较喜欢先搭建前端,毕竟前端可以造假数据,而且我们能先看到ui长什么样,开发都更有动力....

初始化vue项目

vue create togetherToC

如何选择vue2,然后一直点击回车即可,创建完后,读者可以调用一下目录来判断是否创建成功

cd togetherToC
yarn serve

进入网址后,查看是否呈现如下图所示,如果出现则代表创建成功

搭建后端

yarn init