Code:
代码位置
https://github.com/CodingTrain/website/tree/master/Node/sockets
服务器端
server.js
// Based off of Shawn Van Every's Live Web
// http://itp.nyu.edu/~sve204/liveweb_fall2013/week3.html
// Using express: http://expressjs.com/
var express = require('express');
// Create the app
var app = express();
// Set up the server
// process.env.PORT is related to deploying on heroku
var server = app.listen(process.env.PORT || 3000, listen);
// This call back just tells us that the server has started
function listen() {
var host = server.address().address;
var port = server.address().port;
console.log('Example app listening at http://' + host + ':' + port);
}
app.use(express.static('public'));
// WebSocket Portion
// WebSockets work with the HTTP server
var io = require('socket.io')(server);
// Register a callback function to run when we have an individual connection
// This is run for each individual user that connects
io.sockets.on('connection',
// We are given a websocket object in our function
function (socket) {
console.log("We have a new client: " + socket.id);
// When this user emits, client side: socket.emit('otherevent',some data);
socket.on('mouse',function(data) {
// Data comes in as whatever was sent, including objects
console.log("Received: 'mouse' " + data.x + " " + data.y);
// Send it to all other clients
socket.broadcast.emit('mouse', data);
// This is a way to send to everyone including sender
// io.sockets.emit('message', "this goes to everyone");
}
);
socket.on('disconnect', function() {
console.log("Client has disconnected");
});
}
);package.json
{
"name": "sockets_p5",
"version": "1.0.0",
"description": "This is an example for how to use sockets with p5.js.",
"main": "server.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "Daniel Shiffman",
"license": "ISC",
"dependencies": {
"express": "^4.13.4",
"socket.io": "^1.4.5"
}
}客户端
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Sockets Example</title>
<script type="text/javascript" src="https://cdn.socket.io/socket.io-1.4.5.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/p5@1.1.9/lib/p5.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/p5@1.1.9/lib/addons/p5.sound.min.js"></script>
<script type="text/javascript" src="sketch.js"></script>
<style>
body {
padding: 20px;
}
</style>
</head>
<body>
</body>
</html>sketch.js （ProcessingJS）
// ITP Networked Media, Fall 2014
// https://github.com/shiffman/itp-networked-media
// Daniel Shiffman
// Keep track of our socket connection
var socket;
function setup() {
createCanvas(400, 400);
background(0);
// Start a socket connection to the server
// Some day we would run this server somewhere else
socket = io.connect('http://localhost:3000');
// We make a named event called 'mouse' and write an
// anonymous callback function
socket.on('mouse',
// When we receive data
function(data) {
console.log("Got: " + data.x + " " + data.y);
// Draw a blue circle
fill(0,0,255);
noStroke();
ellipse(data.x, data.y, 20, 20);
}
);
}
function draw() {
// Nothing
}
function mouseDragged() {
// Draw some white circles
fill(255);
noStroke();
ellipse(mouseX,mouseY,20,20);
// Send the mouse coordinates
sendmouse(mouseX,mouseY);
}
// Function for sending to the socket
function sendmouse(xpos, ypos) {
// We are sending!
console.log("sendmouse: " + xpos + " " + ypos);
// Make a little object with and y
var data = {
x: xpos,
y: ypos
};
// Send that object to the socket
socket.emit('mouse',data);
}运行
服务端
node server.js
客户端
用浏览器打开index.html