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＆amp; socket-client.html）与map.png位于同一文件夹中。文件夹的完整路径为/home/username/Desktop。有人可以告诉我哪里弄错了吗？

Answer 1

您可以在与脚本文件相同的文件夹下创建一个文件夹，并将其命名为＆＃34; public＆＃34; （或者你喜欢的任何东西）。

在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);

论文将尝试从您的＆＃34;公众＆＃34;加载您的图片夹。仅供参考，＆＃34; http：＆＃34;由于安全原因，我们无法访问您的本地文件（来自本地硬盘）。

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

1 个答案: