准备
1、首先先安装好nodejs2、通过npm安装express和socket.io
基本功能
实现从A页面发送文本、图片，B页面适时地接收我们通过socket.emit()来激发一个事件，通过socket.on()来侦听和处理对应事件。
注意自己引用js的路径
A页面
<!DOCTYPE html>
<html>
<head>
<title>Socket.io-teacher</title>
<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="socket.io/socket.io.js"></script>
<script>
$(document).ready(function() {
var socket=io.connect('http://172.16.208.9:4000');
$("#subButton").click(function(){
var msg = $('#messageInput').val();
$("#messageInput").attr("value","");
if (msg.trim().length != 0) {
socket.emit('postMsg', msg); //把消息发送到服务器
};
})
$('#sendImage').change(function(){
//检查是否有文件被选中
if (this.files.length != 0) {
//获取文件并用FileReader进行读取
var file = this.files[0],
reader = new FileReader();
if (!reader) {
console.log('!your browser doesn\'t support fileReader', 'red');
this.value = '';
return;
};
reader.onload = function(e) {
//读取成功，显示到页面并发送到服务器
this.value = '';
socket.emit('sendImg', e.target.result);
// that._displayImage('me', e.target.result);
};
reader.readAsDataURL(file);
};
})
})
</script>
</head>
<body>
<div id = "content">
<textarea id="messageInput"></textarea><br>
<input type="submit" name="submit" id="subButton" value="submit">
<input id="sendImage" type="file" value="image"/>
</div>
</body>
</html>
B页面
<!DOCTYPE html>
<html>
<head>
<title>Socket.io-student</title>
<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="socket.io/socket.io.js"></script>
<script>
$(document).ready(function() {
var socket=io.connect('你的搭建地址');
socket.on('newMsg', function(msg) {
var date = new Date().toTimeString().substr(0, 8);
var content = 'teacher' + '(' + date + '): </span>' + msg + '<br>';
$("#info").append(content);
});
socket.on('newImg',function(imgData){
var date = new Date().toTimeString().substr(0, 8);
var imageData = 'teacher' + '(' + date + '): <br/>' +
'<a href="' + imgData + '" target="_blank"><img width="400" height="300" src="' + imgData + '"/></a>' + '<br>';
$("#info").append(imageData);
})
})
</script>
</head>
<body>
<div class="banner">
<h1>student content</h1>
</div>
<div id="info">
</div>
</body>
</html>
node服务页面---app.js
var express = require('express'),
app = express(),
path = require('path'),
router = express.Router(),
server = require('http').createServer(app);
io = require('socket.io').listen(server);
app.use(express.static(path.join(__dirname, 'public')));
server.listen(4000);
console.log('server started');
io.on('connection', function(socket) {
//接受消息事件
socket.on('postMsg',function(msg) {
socket.broadcast.emit('newMsg', msg);//获取信息
});
//接受图片消息
socket.on('sendImg',function(image){
socket.broadcast.emit('newImg', image);
})
});
扫一扫
2773
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
