Skip to content

Instantly share code, notes, and snippets.

@KazChe

KazChe/index.html

Created March 27, 2014 04:00
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save KazChe/9799905 to your computer and use it in GitHub Desktop.
Save KazChe/9799905 to your computer and use it in GitHub Desktop.
Download ZIP
blog_socketio_client_html
Raw
index.html
<!doctype html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://localhost:8111/socket.io/socket.io.js"></script>
<script src="main.js"></script>
</head>
<body>
<h4>WebSocket Test</h4>
<h3>Status: <span id="status">Waiting</span></h3>
<hr/>
<h3>Sending Image and File Name</h3>
Phone #: <input type="text" id="phoneNumber" />
Image file: <input type="file" id="imageFile" /><br/>
<div id="selectedImageConainer" style="display: none">
Image Selected: <br><img src="" id="imageSelected"
style="width: 40px; height: 50px; border-width: 0px;"/>
</div>
<hr/>
My server has named me: <pre id="IDReceivedMessage"></pre>
From Server using client.emit <pre id="imageReceivedMessage"></pre>
<img src="" id="imageSentFromServer"
style="width: 40px; height: 50px; border-width: 0px;"/><br/>
<script>
$('#imageFile').on('change', function(e){
var file = e.originalEvent.target.files[0],
reader = new FileReader();
reader.onload = function(evt){
$('#imageSelected').attr('src', evt.target.result);
$('#selectedImageConainer').css('display', '');
var phoneNum = $('#phoneNumber').val();
var jsonObject = {
'imageData': evt.target.result,
'imageMetaData': phoneNum
}
// send a custom socket message to server
socket.emit('user image', jsonObject);
};
reader.readAsDataURL(file);
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment