vue+socket實現訊息推送
阿新 • • 發佈：2018-12-20
前提：後臺已設定好socket訊息
首先在vue專案中引入socket。在npm下載socket。
npm install vue-socket.io
當然也可以在index.html中直接插入下面這句，但是最好不要這樣做。
<script src='https://cdn.bootcss.com/socket.io/2.0.3/socket.io.js'></script>
接下來在登入頁面做連線，也可以在其他頁面
import * as io from 'socket.io'//引入
var vm = this; var socket = io('http://'+document.domain+':2120'); socket.on('connect', function(){ socket.emit('login', bu_id); }); this.$router.push({ path: "/firstpage" });
之後在home.vue頁面實現訊息推送
var vm = this; vm.socket = io('http://'+document.domain+':2120'); vm.socket.on('new_msg', function(msg){ console.log('收到訊息'+msg) });
將連線放在login頁面而不是home頁面的好處是，避免重新整理造成多次連線，收到多條相同訊息。下面程式碼是官網給出的程式碼，可以參考
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <link href="main.css" rel="stylesheet" type="text/css" /> <script src='https://cdn.bootcss.com/socket.io/2.0.3/socket.io.js'></script> <script src='https://cdn.bootcss.com/jquery/1.11.3/jquery.js'></script> <script src='notify.js'></script> </head> <body> <div class="notification sticky hide"> <p id="content"> </p> <a class="close" href="javascript:"> <img src="icon-close.png" /></a> </div> <div class="wrapper"> <div style="width:850px;"> <h3>介紹:</h3> <b>Web-msg-sender</b> 是一個web訊息推送系統，基於<a rel="nofollow" href="https://github.com/walkor/phpsocket.io">PHPSocket.IO</a>開發。<br><br><br> <h3>支援以下特性：</h3> <ul> <li>多瀏覽器支援</li> <li>支援針對單個使用者推送訊息</li> <li>支援向所有使用者推送訊息</li> <li>長連線推送（websocket或者comet），訊息即時到達</li> <li>支援線上使用者數實時統計推送（見頁尾統計）</li> <li>支援線上頁面數實時統計推送（見頁尾統計）</li> </ul> <h3>測試:</h3> 當前使用者uid：<b class="uid"></b><br> 可以通過url：<a id="send_to_one" href="http://www.workerman.net:2121/?type=publish&to=1445590039000&content=%E6%B6%88%E6%81%AF%E5%86%85%E5%AE%B9" target="_blank"><font style="color:#91BD09">http://<font class="domain"></font>:2121?type=publish&to=<b class="uid"></b>&content=訊息內容</font></a> 向當前使用者傳送訊息<br> 可以通過url：<a href="http://www.workerman.net:2121/?type=publish&to=&content=%E6%B6%88%E6%81%AF%E5%86%85%E5%AE%B9" target="_blank" id="send_to_all" ><font style="color:#91BD09">http://<font class="domain"></font>:2121?type=publish&to=&content=訊息內容</font></a> 向所有線上使用者推送訊息<br> <script> // 使用時替換成真實的uid，這裡方便演示使用時間戳 // var uid = Date.parse(new Date()); var uid = 123; $('#send_to_one').attr('href', 'http://'+document.domain+':2121/?type=publish&content=%E6%B6%88%E6%81%AF%E5%86%85%E5%AE%B9&to='+uid); $('.uid').html(uid); $('#send_to_all').attr('href', 'http://'+document.domain+':2121/?type=publish&content=%E6%B6%88%E6%81%AF%E5%86%85%E5%AE%B9'); $('.uid').html(uid); $('.domain').html(document.domain); </script> </div> <script> $(document).ready(function () { // 連線服務端 var socket = io('http://'+document.domain+':2120'); // 連線後登入 socket.on('connect', function(){ socket.emit('login', uid); }); // 後端推送來訊息時 socket.on('new_msg', function(msg){ $('#content').html('收到訊息：'+msg); $('.notification.sticky').notify(); }); }); </script> <div id="footer"> <center id="online_box"></center> <center><p style="font-size:11px;color:#555;"> Powered by <a href="http://www.workerman.net/web-sender" target="_blank"><strong>web-msg-sender!</strong></a></p></center> </div> </body> </html>