基于node.js的websocket上传小功能
一、node.js
在目录里新建index.js
var ws = require("nodejs-websocket");
console.log("开始建立连接...")
var server = ws.createServer(function(conn){
conn.on("text", function (str) {
console.log("收到的信息为:"+str)
conn.sendText(str)
})
conn.on("close", function (code, reason) {
console.log("关闭连接")
});
conn.on("error", function (code, reason) {
console.log("异常关闭")
});
}).listen(8001)
console.log("WebSocket建立完毕")
在node目录 npm install nodejs-websocket
二、前端页面
<!DOCTYPE html>
<html>
<head>
<title>html</title>
</head>
<body>
<div class="wrap">
<div>
<input type="file" id="files1" name="file" />
</div>
<div>
<input type="file" id="files2" name="file" />
</div>
<button id="upload">upload</button>
</div>
<script>
var socket document.getElementById("upload").addEventListener("click", function () {
var open_SUCC = openSocket("ws://localhost:8001")
setTimeout(function () {
fileUpload()
}, 500)
}, false)
function openSocket (url) {
if (!window.WebSocket) {
window.WebSocket = window.MozWebSocket
}
if (window.WebSocket) {
socket = new WebSocket(url)
socket.onopen = onOpen
return 'ok'
}else {
alert("your browser does not support websocket")
}
} function onOpen (event) {
console.log("websocket is opened")
}
function fileUpload () {
var files = new Array()
files[0] = document.getElementById('files1').files
files[1] = document.getElementById('files2').files
//files = document.getElementById('files1').files
if ((!files[0].length) && (!files[1].length)) {
//if (!files.length) {
alert('Please select a file!')
return
}
for (var i=0; i<files.length; i++) {
var file = files[i][0]//
var fileInfo = {
"opcode":1,
"name":file.name,
"size":file.size,
"lastModifiedDate":file.lastModifiedDate
}
send(JSON.stringify(fileInfo))
}
socket.onmessage = function (event) {
var startStop = JSON.parse(event.data)
if (startStop.startByte === startStop.stopByte || startStop.complete) {
console.log(startStop)
console.log("文件上传成功!")
}
}
} function send (message) {
if(!window.WebSocket){
return
}
if (socket.readyState==WebSocket.OPEN) {
socket.send(message)
}else {
console.log("the socket is not open")
}
} </script>
</body>
</html>
三、测试
在node目录打开命令行，执行 node index.js
在浏览器打开本地html，选择文件 upload， console和命令行会输出文件信息
基于node.js的websocket上传小功能的更多相关文章
- Nodejs学习笔记（八）--- Node.js + Express 实现上传文件功能（felixge/node-formidable）
目录 前言 formidable简介 创建项目并安装formidable 实现上传功能 运行结果 部分疑惑解析 写在之后 前言 前面讲了一个构建网站的示例,这次在此基础上再说说web的常规功能---- ...
- Nodejs学习笔记（八）—Node.js + Express 实现上传文件功能（felixge/node-formidable）
前言 前面讲了一个构建网站的示例,这次在此基础上再说说web的常规功能----文件上传,示例以一个上传图片的功能为例子 上传功能命名用formidable实现,示例很简单! PS:最近比较忙,距上一次 ...
- 基于node.js 的 websocket的移动端H5直播开发
这一篇介绍一下基于node.js 的 websocket的移动端H5直播开发, 下载文章底部的源码,我是用vscode打开, 首先在第一个终端运行 npm run http-server 这个指令是运 ...
- 又拍云 Node.js 实现文件上传、删除
Node.js 服务端 使用 Node.js + Express.js 实现 服务端 const express = require("express"); const app = ...
- 基于cropper.js的图片上传和裁剪
项目中要求图片上传并裁剪的功能,之前也有接触过很多图片裁剪插件,效果体验不是很好,今天推荐一款好用的插件-cropper,超级好用,裁剪功能丰富,满足了各种需求. 功能: 1:点击选择图片,弹出文件夹 ...
- 基于Node的React图片上传组件实现
写在前面 红旗不倒,誓把JavaScript进行到底!今天介绍我的开源项目 Royal 里的图片上传组件的前后端实现原理(React + Node),花了一些时间,希望对你有所帮助. 前端实现 遵循R ...
- Node.js之图片上传
本文用node进行图片上传主要借助formidable插件,具体使用步骤如下: 1.安装formidable插件 npm install formidable -g 2.引入依赖包 const for ...
- Node.js实现图片上传功能
node接口实现 const express = require('express') const mysql = require('mysql') const cors = require('cor ...
- 基于node.js的websocket 前后端交互小功能
一.node var ws = require("nodejs-websocket"); console.log("开始建立连接...") var server ...
随机推荐
- ES-基本概念
目录: 1. ElasticSearch是什么 2. 基本概念 3. 几个关键词 正文: 1. ElasticSearch是什么 ElasticSearch是一个基于Lucene的搜索 ...
- Linux系列：进阶之jdk、X window安装与使用
1.安装x window 分为两步: 1.安装 x window,执行指令yum groupinstall “X Window” 2.安装GNOME Desktop,执行指令yum groupinst ...
- 2019年9月训练(壹)数位DP (HDU 2089)
开学之后完全没时间写博客.... HDU 2089 不要62(vjudge) 数位DP 思路: 题目给出区间[n,m] ,找出不含4或62的数的个数 用一个简单的差分:先求0~m+1的个数,再减去0~ ...
- X86逆向6：易语言程序的DIY
易语言程序在中国的用户量还是很大的,广泛用于外挂的开发,和一些小工具的编写,今天我们就来看下如何给易语言程序DIY,这里是用的易语言演示,当然这门技术也是可以应用到任何一门编译型语言中的,只要掌握合适 ...
- GET方法和POST方法的区别，Get方法到底可传递的字符串的最大长度是多少？
GET方法和POST方法的区别,Get方法到底可传递的字符串的最大长度是多少?曾经人介绍,如果使用GET方式传输参数,URL的最大长度是256个字节,对此深信不疑. 但是最近看到一些超长的url,能够 ...
- 换发型app任性扣费？苹果app订阅任性扣费？怎么办？刚成功
2019年9月18日17:09:27 什么黑猫举报没用 先关闭订阅 账户中心自助申请试试,不通过再进行下面这步 https://getsupport.apple.com/?caller=home&am ...
- Tika检测文件类型
Tika类型检测 Tika支持MIME所提供的所有互联网媒体文件类型.每当一个文件通过Tika检测到该文件,其文件类型.检测的介质类型,Tika内部通过以下机制. MIME标准 多用途Internet ...
- 打包JavaFX11桌面应用程序
打包JavaFX11桌面应用程序 这是JavaFX系列的第二弹,第一弹在这里 在第一弹中,我们使用的是OpenJDK8,但是OpenJDK8和Oracle Java JDK不一样,它没有内置JavaF ...
- PS 中混合模式
1.正常模式 2. 溶解 3. 变暗 : 把两幅图中较暗的区域显示出来 4.正片叠底 总体变暗,把图层中较浅的颜色由下一图层较深的颜色显现(和滤色相反) 7. 深色 取较小的颜色 8. ...
- 记 Win10 - Archlinux - Archlinux(Emergency) 三系统安装/配置注意事项
起因是正常使用的archlinux做滚动更新,结果貌似有一个盘块写坏了(?). 手上没有U盘,进入不了linux,不好做fsck.于是直接就直接用win10了. 取消Fast Boot 当晚进入lin ...