The latest articles on DEV Community by Genal (@genaller). https://dev.to/genaller https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F473760%2F07a6c994-4b47-4122-a041-0d8d449d30b7.jpeg https://dev.to/genaller en Genal Tue, 03 Nov 2020 09:06:17 +0000 https://dev.to/genaller/powerful-astro-boy-chat-room-43li https://dev.to/genaller/powerful-astro-boy-chat-room-43li <h1> Powerful Astro Boy chat room </h1> <p><a href="https://github.com/genaller"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--c0rS8CiN--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://img.shields.io/badge/author-genaller-blue.svg" alt="author"></a><br> <a href="https://github.com/genaller/genal-chat"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--lex-0oCw--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://img.shields.io/github/languages/top/genaller/genal-chat" alt="author"></a><br> <a href="http://nodejs.org/download"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--MpWRYvor--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://img.shields.io/badge/node.js-10.16.3-blue.svg" alt="Node.js Version"></a><br> <a href="https://github.com/genaller/genal-chat/blob/master/LICENSE"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--nYjkmuqM--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://img.shields.io/badge/License-MIT-blue.svg" alt="License: MIT"></a><br> <a href="https://github.com/genaller/genal-chat"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--Qq584REF--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://img.shields.io/github/stars/genaller/genal-chat%3Fstyle%3Dsocial" alt="author"></a></p> <blockquote> <p><a href="https://gitee.com/edison_dec/genal-chat">码云</a><br></p> <p>在线地址<a href="http://www.genal.fun">www.genal.fun</a><br></p> <p>有建议请到issues区</p> </blockquote> <h3> Project introduction </h3> <p>😛 leisure time to do a chat room to consolidate the front-end skills, and in 2020 began on June 24th astro boy chat room for the development of tour.<br><br> 😈 project adopts the typescript development, this is the functional iteration groundwork for future.Of course, I like Typescript very much.<br><br> 🧐 now chat chat room has complete functions, the future will gradually develop more cool features, like a friend to a star give me!<br></p> <h3> Program interface </h3> <h4> PC </h4> <p><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--TG45mFR7--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/y8itvmvsyzn3v3dgwp0g.png" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--TG45mFR7--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/y8itvmvsyzn3v3dgwp0g.png" alt="Alt Text"></a></p> <h4> mobile </h4> <p><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--U0YRtRvO--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/ayek1g6j5acpo6zxt0ij.png" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--U0YRtRvO--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/ayek1g6j5acpo6zxt0ij.png" alt="Alt Text"></a></p> <h3> function Introduction </h3> <ul> <li>mobile compatible</li> <li>user information modification (head/username/password)</li> <li>group/private chat</li> <li>create a group to join the group / / group/fuzzy search group</li> <li>add/delete/fuzzy search users friends</li> <li>news page</li> <li>expression package</li> <li>sent pictures/image preview</li> <li>the number of online statistics</li> <li>a custom theme</li> <li>reconnection to remind</li> </ul> <h3> Technology </h3> <ul> <li> <strong>Typescript</strong>：JavaScript 的一个超集，它最大的优势是提供了类型系统和提高了代码的可读性和可维护性。</li> <li> <strong>Vue2.6.x</strong>：前端渐进式框架。</li> <li> <strong>Socket/io</strong>：实现实时通信，websocket第三方库。</li> <li> <strong>Vuex</strong>：专为 Vue.js 应用程序开发的状态管理模式。</li> <li> <strong>Nestjs</strong>：是一个用于构建高效、可扩展的 Node.js 服务端应用框架，基于 TypeScript 编写并且结合了 OOP1、FP2、FRP3 的相关理念。</li> <li> <strong>Typeorm</strong>: 支持最新的 JavaScript 特性并提供额外的特性以帮助你开发任何使用数据库的应用程序。</li> <li> <strong>ES6+</strong>：采用ES6+语法，箭头函数、async/await等等语法很好用。</li> <li> <strong>SASS(SCSS)</strong>：用SCSS做CSS预处理语言，可以使用最高效的方式，以少量的代码创建复杂的设计。</li> </ul> <h3> mysql </h3> <p><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--1k1mNN7F--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/0nzx8b2nclpvp4fdicbh.png" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--1k1mNN7F--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/0nzx8b2nclpvp4fdicbh.png" alt="Alt Text"></a></p> <h3> Environment configuration </h3> <ul> <li>数据库mysql 以及 chat数据库</li> <li>node v10.16.3</li> </ul> <h3> how to run </h3> <div class="highlight js-code-highlight"> <pre class="highlight javascript"><code><span class="nx">cd</span> <span class="nx">genal</span><span class="o">-</span><span class="nx">chat</span><span class="o">-</span><span class="nx">client</span> <span class="nx">npm</span> <span class="nx">i</span> <span class="nx">npm</span> <span class="nx">run</span> <span class="nx">serve</span> </code></pre> </div> <div class="highlight js-code-highlight"> <pre class="highlight javascript"><code><span class="nx">cd</span> <span class="nx">genal</span><span class="o">-</span><span class="nx">chat</span><span class="o">-</span><span class="nx">server</span> <span class="nx">npm</span> <span class="nx">i</span> <span class="nx">npm</span> <span class="nx">run</span> <span class="nx">start</span><span class="p">:</span><span class="nx">dev</span> </code></pre> </div> <h3> author </h3> <p>github： <a href="https://github.com/genaller">edison</a></p> <h3> url </h3> <p><a href="https://genal.fun/">https://genal.fun/</a></p> vue node typescript javascript