Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <html>
- <head>
- <script type="text/javascript" src="http://www.google.com/jsapi"></script>
- <script type="text/javascript">
- google.load("jquery", "1.7.1");
- </script>
- <title>Socket hello world</title>
- <style>
- textarea{
- width:500px;
- height:200px;
- }
- input[type=text]{
- width:450px;
- }
- td{
- vertical-align:top;
- }
- #socket-ids{
- overflow-x:hidden;
- overflow-y:scroll;
- border:1px solid #888;
- width:200px;
- height:200px;
- }
- .private-msg{
- color:red;
- }
- </style>
- <script src="http://socket.local:8080/socket.io/socket.io.js"></script>
- <script>
- var socket = io.connect('http://socket.local:8080/');
- var client_id;
- socket.on('connect', function (data) {
- socket.on('register',function(data){
- client_id = data.client_id;
- $('h1[id=title]').html("Socket.IO - " + client_id);
- });
- socket.on('client list', function (data) {
- $('div[id=socket-ids]').html("");
- for(var i in data.clients){
- if(i != client_id){
- $('div[id=socket-ids]').append(
- "<a href='#' id='users-id'><div>" + i + "</div></a>"
- );
- }
- }
- });
- socket.on('private message',function(data){
- console.log(data);
- $('textarea[id=text-lobby]').val(function(i,text){
- return text + "Private Message From - " + data.from + ": " + data.msg + "\r";
- });
- });
- socket.on('lobby message',function(data){
- console.log(data);
- $('textarea[id=text-lobby]').val(function(i,text){
- return text + data.sender_id + ": " + data.msg + "\r";
- });
- });
- socket.on('some user disconnected',function(data){
- console.log('some user disconnected');
- $('div[id=socket-ids]').find('a[id=' + data.disconnected_id + ']').remove();
- });
- });
- $(document).ready(function(){
- $('input[id=button-send]').click(function(){
- var input_msg = $('input[id=input-msg]').val();
- if(input_msg != ""){
- socket.emit('send to all',input_msg,function(data){
- if(data){
- $('input[id=input-msg]').val("");
- }
- });
- }
- });
- $('a[id=users-id]').live('click',function(){
- var socket_id = $(this).find('div').html();
- var pm = prompt("Private Message to " + socket_id ,"Enter your message here:");
- if(pm!=""){
- socket.emit('private message',{msg:pm,socket_id:socket_id},function(data){
- if(data.success){
- alert("Message has been sent");
- }
- });
- }
- });
- });
- </script>
- </head>
- <body>
- <h1 id='title'>Socket.IO</h1>
- <br/><hr/>
- <table>
- <tbody>
- <tr>
- <td>
- <label>Chatbox</label><br/>
- <textarea id='text-lobby' readonly="readonly"></textarea><br />
- <input id='input-msg' type='text' /><input id='button-send' type='button' value='Send' />
- </td>
- <td>
- <label>CLient List</label>
- <div id='socket-ids'>
- </div>
- </td>
- <tr>
- </tbody>
- </table>
- </body>
- </html>
Add Comment
Please, Sign In to add comment