脚本宝典收集整理的这篇文章主要介绍了

Vue全家桶+Socket.io+Koa2打造一个智能聊天室 接口已开放

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。
<p><code></p> <h1 id="articleHeader0"><a href="http://www.js-code.com/tag/vue" title="Vue" target="_blank">Vue</a>.js+Socket.io+Koa2打造一个智能聊天室</h1> <p><a href="http://www.js-code.com/tag/vue" title="Vue" target="_blank">Vue</a>.js全家桶+Socket.io+Express/Koa2 打造的一个智能聊天室。<br />已经开源啦!为了方便大家学习,智能机器人、IP定位接口也开放了!接口请在源码中查看?</p> <blockquote> <p>&nbsp;&nbsp;&nbsp;QQ群里面的智能机器人很火,于是用<a href="http://www.js-code.com/tag/vue" title="浏览关于“Vue”的文章" target="_blank" class="tag_link">Vue</a>.js+Socket.io+Koa2打造了一个智能聊天室,实现了IP定位、在线群聊,加入了Emoji表情?,以及接入了智能机器人?</p> </blockquote> <h2 id="articleHeader1">前言</h2> <p>话说最近前端技术圈也有派系之争了,是好事还是坏事?萝卜青菜各有所爱,本项目采用的是Vue.js做前端页面展示,大家完全可以换成自己别的喜欢的,<a href="http://www.js-code.com/tag/react" title="React" target="_blank">React</a>、<a href="http://www.js-code.com/tag/angular" title="Angular" target="_blank">Angular</a>等等,每个框架都有可取的地方,这里不多说?下面扯到正题上?</p> <h2 id="articleHeader2">预览</h2> <p>在线预览地址:? <a href="https://microzz.com/vue-chat/" rel="nofollow noreferrer" target="_blank">https://microzz.com/vue-chat/</a></p> <p><span class="img-wrap"><img data-src="/img/remote/1460000009368581?w=724&amp;h=1473" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="Vue.js+Socket.io 智能聊天室 microzz.com" title="Vue.js+Socket.io 智能聊天室 microzz.com" style="cursor: pointer;"></span></p> <p><span class="img-wrap"><img data-src="/img/remote/1460000009368582?w=724&amp;h=1473" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="Vue.js+Socket.io 智能聊天室 microzz.com" title="Vue.js+Socket.io 智能聊天室 microzz.com" style="cursor: pointer;"></span></p> <h2 id="articleHeader3">源代码</h2> <p>现在已经开源: ?<a href="https://github.com/microzz/vue-chat" rel="nofollow noreferrer" target="_blank">https://github.com/microzz/vu...</a><br /> 欢迎star和提出宝贵意见?</p> <h2 id="articleHeader4">技术栈</h2> <ul> <li> <p><strong>Vue2.0</strong>:前端页面展示。</p> </li> <li> <p><strong>Socket.io</strong>:实现实时通信</p> </li> <li> <p><strong>Vuex</strong>:Vuex,实现不同组件间的状态共享</p> </li> <li> <p><strong>vue-router</strong>:页面路由切换</p> </li> <li> <p><strong>ax<a href="http://www.js-code.com/tag/ios" title="ios" target="_blank">ios</a></strong>:一个基于 <code><a href="http://www.js-code.com/tag/promis" title="Promis" target="_blank">Promis</a>e</code> 的 HTTP 库,向后端发起请求。</p> </li> <li> <p><strong>Express</strong>、<strong>Koa2</strong>:因为vue-cli生成的项目是基于<strong>express</strong>的,所以在开发阶段我使用的是它,但是真正上线生产环境我换成了<strong>Koa2</strong>。</p> </li> <li> <p><strong>Moment.js</strong>:一个时间处理的库,方便对时间进行格式化成需要的格式。</p> </li> <li> <p><strong>ES6</strong>、<strong>ES7</strong>:采用ES6语法,这是以后的趋势。<a href="http://www.js-code.com/tag/%e7%ae%ad%e5%a4%b4%e5%87%bd%e6%95%b0" title="箭头函数" target="_blank">箭头函数</a>、<a href="http://www.js-code.com/tag/promise" title="Promise" target="_blank">Promise</a>等等语法很好用。</p> </li> <li> <p><strong>localStorage</strong>:保存用户信息以及聊天记录。</p> </li> <li> <p><strong>Webpack</strong>:vue-cli自带Webpack,但是需要自己改造一下,比如要对需要安装sass相关loader,vue-cli已经配置好了webpack,你只需要安装依赖就可以,使用的时候只需要<code>&lt;style lang="scss"&gt;&lt;/style&gt;</code>。</p> </li> <li> <p><strong>SASS</strong>(<strong>S<a href="http://www.js-code.com/tag/css" title="CSS" target="_blank">CSS</a></strong>):用S<a href="http://www.js-code.com/tag/css" title="CSS" target="_blank">CSS</a>做<a href="http://www.js-code.com/tag/css" title="浏览关于“CSS”的文章" target="_blank" class="tag_link">CSS</a>预处理语言,有些地方很方便,个人很喜欢用。(详看?<a href="https://microzz.com/2017/03/18/sass/" rel="nofollow noreferrer" target="_blank">SASS用法指南</a>)</p> </li> <li> <p><strong><a href="http://www.js-code.com/tag/flex" title="flex" target="_blank">flex</a></strong>:<a href="http://www.js-code.com/tag/flex" title="flex" target="_blank">flex</a>弹性布局,<strong>简单</strong>适配手机、PC端。</p> </li> <li> <p><strong>CSS3</strong>:CSS3过渡动画及样式。</p> </li> </ul> <h2 id="articleHeader5">分析</h2> <h3 id="articleHeader6">Socket.io</h3> <p>通过Express/Koa在服务端可以这样做:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="// Server (app.js) var app = require('express')(); var server = require('http').Server(app); var io = require('socket.io')(server); server.listen(80); app.get('/', function (req, res) { res.sendfile(__dirname + '/index.html'); }); io.on('connection', function (socket) { socket.emit('news', { hello: 'world' }); socket.on('my other event', function (data) { console.log(data); }); });" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="javascript"><span class="hljs-comment">// Server (app.js)</span> <span class="hljs-keyword"><a href="http://www.js-code.com/tag/var" title="浏览关于“var”的文章" target="_blank" class="tag_link">var</a></span> app = <span class="hljs-built_in">require</span>(<span class="hljs-string">'express'</span>)(); <span class="hljs-keyword">var</span> server = <span class="hljs-built_in">require</span>(<span class="hljs-string">'http'</span>).Server(app); <span class="hljs-keyword">var</span> io = <span class="hljs-built_in">require</span>(<span class="hljs-string">'socket.io'</span>)(server); server.listen(<span class="hljs-number">80</span>); app.get(<span class="hljs-string">'/'</span>, <span class="hljs-function"><span class="hljs-keyword"><a href="http://www.js-code.com/tag/function" title="浏览关于“function”的文章" target="_blank" class="tag_link">function</a></span> (<span class="hljs-params">req, res</span>) </span>{ res.sendfile(__dir<a href="http://www.js-code.com/tag/name" title="浏览关于“name”的文章" target="_blank" class="tag_link">name</a> + <span class="hljs-string">'/<a href="http://www.js-code.com/tag/in" title="浏览关于“in”的文章" target="_blank" class="tag_link">in</a>dex.html'</span>); }); io.on(<span class="hljs-string">'connection'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">socket</span>) </span>{ socket.emit(<span class="hljs-string">'<a href="http://www.js-code.com/tag/new" title="浏览关于“new”的文章" target="_blank" class="tag_link">new</a>s'</span>, { <span class="hljs-attr">hello</span>: <span class="hljs-string">'world'</span> }); socket.on(<span class="hljs-string">'my other <a href="http://www.js-code.com/tag/event" title="浏览关于“event”的文章" target="_blank" class="tag_link">event</a>'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">data</span>) </span>{ <span class="hljs-built_in">console</span>.log(data); }); });</code></pre> <p>客户端代码</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="<a href="http://www.js-code.com/tag/button" title="button" target="_blank">button</a>" <a href="http://www.js-code.com/tag/class" title="class" target="_blank">class</a>="copyCode code-tool" data-toggle="tooltip" data-placement="<a href="http://www.js-code.com/tag/top" title="top" target="_blank">top</a>" data-clipboard-<a href="http://www.js-code.com/tag/text" title="text" target="_blank">text</a>="// Client (<a href="http://www.js-code.com/tag/in" title="in" target="_blank">in</a>dex.html)</p> <p><script src=&quot;/socket.io/socket.io.js&quot;></script><br /> <script> <a href="http://www.js-code.com/tag/var" title="var" target="_blank">var</a> socket = io.connect('http://localhost'); socket.on('<a href="http://www.js-code.com/tag/new" title="new" target="_blank">new</a>s', <a href="http://www.js-code.com/tag/function" title="function" target="_blank">function</a> (data) { console.log(data); socket.emit('my other <a href="http://www.js-code.com/tag/event" title="event" target="_blank">event</a>', { my: 'data' }); }); </script>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="javascript"><span class="hljs-comment">// Client (index.html)</span> &lt;script src=<span class="hljs-string">"/socket.io/socket.io.js"</span>&gt;<span class="xml"><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></span> &lt;script&gt; <span class="hljs-keyword">var</span> socket = io.connect(<span class="hljs-string">'http://localhost'</span>); socket.on(<span class="hljs-string">'news'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">data</span>) </span>{ <span class="hljs-built_in">console</span>.log(data); socket.emit(<span class="hljs-string">'my other event'</span>, { <span class="hljs-attr">my</span>: <span class="hljs-string">'data'</span> }); }); <span class="xml"><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></span></code></pre> <p>不管是服务器还是客户端都有 <code>emit</code> 和 <code>on</code> 这两个函数,可以说 socket.io 的核心就是这两个函数了,通过 <code>emit</code> 和 <code>on</code> 可以轻松地实现服务器与客户端之间的双向通信。</p> <p><code>emit</code> :用来发射一个事件或者说触发一个事件,第一个参数为事件名,第二个参数为要发送的数据,第三个参数为回调函数(一般省略,如需对方接受到信息后立即得到确认时,则需要用到回调函数)。<br /><code>on</code> :用来监听一个 emit 发射的事件,第一个参数为要监听的事件名,第二个参数为一个匿名函数用来接收对方发来的数据,该匿名函数的第一个参数为接收的数据,若有第二个参数,则为要返回的函数。<br />socket.io 提供了三种默认的事件(客户端和服务器都有):<code>connect</code> 、<code>message</code> 、<code>disconnect</code> 。当与对方建立连接后自动触发 <code>connect</code> 事件,当收到对方发来的数据后触发 <code>message</code> 事件(通常为 <code>socket.send()</code> 触发),当对方关闭连接后触发 <code>disconnect</code> 事件。</p> <p>此外,socket.io 还支持自定义事件,毕竟以上三种事件应用范围有限,正是通过这些自定义的事件才实现了丰富多彩的通信。</p> <p>最后,需要注意的是,在服务器端区分以下三种情况:</p> <p><code>socket.emit()</code> :向建立该连接的客户端广播<br /><code>socket.broadcast.emit()</code> :向除去建立该连接的客户端的所有客户端广播<br /><code>io.sockets.emit()</code> :向所有客户端广播,等同于上面两个的和</p> <h2 id="articleHeader7">Vue.js</h2> <p>在Vue的方面就比较常规了,Vue全家桶:Vue2.0+Vuex+ax<a href="http://www.js-code.com/tag/ios" title="ios" target="_blank">ios</a>+vue-router,我GitHub的有几个开源项目可以参考?<a href="https://github.com/microzz" rel="nofollow noreferrer" target="_blank">https://github.com/microzz</a></p> <h2 id="articleHeader8">总结</h2> <ol> <li> <p>组件状态多了用Vuex管理很方便,引用 Redux 的作者 Dan Abramov 的话说就是:</p> </li> </ol> <blockquote> <p>Flux 架构就像眼镜:您自会知道什么时候需要它。</p> </blockquote> <ol> <li> <p>事先一定要先想好整个页面组成,怎样去分组件开发,这样在开发阶段会事半功倍。</p> </li> <li> <p>Moment.js在Vue中用ES6的方式引入会有问题,可以尝试在ma<a href="http://www.js-code.com/tag/in" title="in" target="_blank">in</a>.js尝试这样<code><a href="http://www.js-code.com/tag/import" title="import" target="_blank">import</a> moment from 'moment'</code> <code>Vue.<a href="http://www.js-code.com/tag/prototype" title="prototype" target="_blank">prototype</a>.moment = moment;</code>给Vue的原型上添加moment,这样就可以在Vue的实例中随意使用它了。</p> </li> <li> <p>get方式通过URL传参最好使用<code><a href="http://www.js-code.com/tag/encodeURI" title="encodeURI" target="_blank">encodeURI</a></code>对参数进行编码</p> </li> <li> <p>一定要处理好那些异步操作,否则会带来各种问题。开发阶段使用的是<code><a href="http://www.js-code.com/tag/promis" title="Promis" target="_blank">Promis</a>e</code>,上线时候使用了ES7的<code>Async</code>+<code><a href="http://www.js-code.com/tag/promise" title="Promise" target="_blank">Promise</a></code>的组合,让异步操作更加合理。</p> </li> </ol> <h2 id="articleHeader9">About</h2> <p>关于我:?<a href="https://microzz.com/about/" rel="nofollow noreferrer" target="_blank">https://microzz.com/about/</a></p> <p>GitHub:? <a href="https://github.com/microzz" rel="nofollow noreferrer" target="_blank">https://github.com/microzz</a></p> <p>E-mail: ? <a href="mailto:zhaohui@microzz.com">zhaohui@microzz.com</a></p> <p>个人网站: ?<a href="https://microzz.com/" rel="nofollow noreferrer" target="_blank">https://microzz.com/</a></p> <p></code></p>

总结

以上是脚本宝典为你收集整理的

Vue全家桶+Socket.io+Koa2打造一个智能聊天室 接口已开放

全部内容,希望文章能够帮你解决

Vue全家桶+Socket.io+Koa2打造一个智能聊天室 接口已开放

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过