使用 raphael.js 绘制图像，参数通过 socket.io 发送

Question

这是我目前尝试过的方法。

socket-server.js

var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);
var config = require('./config2.js');

app.get('/', function(req, res){
  res.sendfile('socket-client.html');
});
io.on("connection", function (socket) {
    var mapRes = {width : 720, height: 1040};
    socket.emit("mapRes", mapRes);
});
http.listen(3000, function(){
  console.log('listening on *:3000');
});

来自socket-client.html

的相关脚本

var socket = io();
window.onload = function() {
    var paper = new Raphael(document.getElementById('canvas'), canvas_width, canvas_height);
    socket.on('mapRes', function(message){
    var mapRes = message;
    var mapImg = paper.image("http://localhost/home/username/Desktop/map.png",0,0,mapRes.width,mapRes.height);
    });
}

这里，"canvas"只是一个应该加载图片的标签的id

尽管控制台显示 GET http://localhost/home/username/Desktop/map.png [0ms]，但未加载图像。图片和代码 (socket-server.js & socket-client.html) 都在与 map.png 相同的文件夹中。文件夹的完整路径是 /home/username/Desktop。谁能告诉我哪里做错了？

Answer 1

您可以在与脚本文件相同的文件夹下创建一个文件夹并将其命名为 "public"（或您喜欢的任何名称）。

在你的 socket-server.js,

var express = require('express');
var app = express();
app.use(express.static('public')); //let express access your "public" folder.

在你的 client.html,

var mapImg = paper.image("./map.png",x,y,width,height);

Paper 将尝试从您的 "public" 文件夹加载图像。仅供参考，出于安全原因，"http:" 将无法访问您的本地文件（从本地 HDD）。

使用 raphael.js 绘制图像，参数通过 socket.io 发送

Using raphael.js to draw an image with parameters sent through socket.io

javascript

image

raphael

socket.io