socket socket.io

利用socket實現客戶端和服務端的雙向通信

 

 利用ws模塊建立一個socket服務端

頁面利用WebSocket建立一個客戶端並鏈接服務端socket

服務端設置on connection鏈接客戶端    參數socket爲每個訪問客戶端  這個函數會在有客戶端鏈接的時候被觸發   用來執行向全部人通知有人上下線

在裏面設置一個on message事件    在客戶端向服務端發送信息的時候觸發能夠用來進行數據的傳輸

在客戶端設置一個接收數據的函數onmessage  必須有參數   參數.data就是接受到的數據   這個函數會在接收到服務端發送的信息時觸發    用來將接受到的數據渲染到頁面中去

利用http模塊和fs模塊設置一個服務   設置好請求頭和返回的文件    這個是總的服務器     有了這個socket模塊就不須要監聽了   直接監聽這個服務就好

上傳圖片的方式

 

利用bootstrop的模態框的框架搭建佈局

在點擊上傳按鈕的時候調用他的controller的方法uploadImg、

$scope.uploadImg = function() {

      var inp = document.getElementsByClassName("uploadinp")[0]

      var img = inp.files[0]//固定寫法

      var reader = new FileReader()

      reader.readAsDataURL(img)

      reader.onload = function(e) {

        _http({

           url: '/manager/addBanner',

           type: 'post',//要用post請求  圖片數據量太大

           data: {

              title: $scope.title,

              imgdata: this.result

           },

           success: function(results) {

              console.log(results)

                if(results == 1) {

                 alert('ok')

              }

           }

        })

      }

   }

 

利用socket.io改造socket

 

Cnpm i socket.io 下載socket模塊    並在index鏈接socket.io.js

 

socket.io

鏈接socket.io的方法是 io.connect

先後端鏈接的方法是on connect  

發送數據的方法是 on message  

斷開鏈接的方法是 on  disconnect

在socket.io中  發送的數據不能夠是中文   因此在發送數據給客戶端時

 nickname爲new friend   而且判斷客戶端名稱的時候發送給其餘客戶端的消息中要初始化nickname爲「」  type爲0  再從新遍歷存放客戶端的區域再進行賦值傳輸

 

改造電商   新商品添加的時彈出提示框   提示用戶有新商品上架  用戶點擊查看新商品

下載jq插件   在頁面引入css和js  jquery

在項目服務器中引入socket.io模塊並鏈接好客戶端  在客戶端訪問時將客戶id放入存放客戶端id的區域中    在斷開時刪除

在首頁引入socket.io   建立script標籤    在這裏鏈接服務端  並接受到信息後彈出提示框的框架    設置好參數

建立一個遍歷後端數據的方法    項目服務區中鏈接客戶端後   在客戶端訪問的時候存儲的地方掛載在這裏     存在一個區域將全部的客戶端遍歷id發送提示框

      在添加商品的api中填寫方法   在項目數據庫成功插入數據後返回這個數據的id值  在頁面中點擊時能夠利用id進入詳情頁查看新商品

      一、socket.io傳輸有中文的限制    將傳輸的中文改成英文在頁面中再判斷將英文的暱稱修改成中文   傳輸信息的時候要先將暱稱和類型寫爲空和0   再從新遍歷存放客戶信息的區域  將暱稱和類型從新賦值傳輸

      二、頁面向項目數據庫插入的數據是一個數組    數組中頗有多條信息  帶有id要寫爲數組的第0個 

      三、掛載數據時要將存放客戶端數據的地方放在遍歷數據的地方上  給他掛一個空的對象    在項目數據庫成功插入數據返回數據時執行這個對象的方法