利用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进入详情页查看新商品
1、socket.io传输有中文的限制 将传输的中文改为英文在页面中再判断将英文的昵称修改为中文 传输信息的时候要先将昵称和类型写为空和0 再重新遍历存放客户信息的区域 将昵称和类型重新赋值传输
2、页面向项目数据库插入的数据是一个数组 数组中很有多条信息 带有id要写为数组的第0个
3、挂载数据时要将存放客户端数据的地方放在遍历数据的地方上 给他挂一个空的对象 在项目数据库成功插入数据返回数据时执行这个对象的方法