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个 

      三、挂载数据时要将存放客户端数据的地方放在遍历数据的地方上  给他挂一个空的对象    在项目数据库成功插入数据返回数据时执行这个对象的方法