一、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和命令行会输出文件信息