vue+socket實現消息推送

時間 2019-12-20

標籤 vue+socket vue socket 實現消息推送欄目系統網絡简体版

原文原文鏈接

前提：後臺已設定好socket消息javascript

首先在vue項目中引入socket。在npm下載socket。php

npm install vue-socket.io

固然也能夠在index.html中直接插入下面這句，可是最好不要這樣作。css

<script src='https://cdn.bootcss.com/socket.io/2.0.3/socket.io.js'></script>

接下來在登陸頁面作鏈接，也能夠在其餘頁面html

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頁面實現消息推送vue

    var vm = this;
    vm.socket = io('http://'+document.domain+':2120');
    vm.socket.on('new_msg', function(msg){
        console.log('收到消息'+msg)
    });

將鏈接放在login頁面而不是home頁面的好處是，避免刷新形成屢次鏈接，收到多條相同消息。下面代碼是官網給出的代碼，能夠參考java

<!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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。