rauchg / chat-example Goto Github PK

View Code? Open in Web Editor NEW

798.0 57.0 2.1K 3 KB

JavaScript 24.16% HTML 75.84%

chat-example's Introduction

Now maintained here: https://github.com/socketio/chat-example

chat-example's People

Contributors

Stargazers

Watchers

Forkers

richsad brennangw rnldyosua hmxxnsg solosier laurentrobidoux terry513 amreeshtyagi lanceng luudv timrnichols ellesontlee1961 lahirudraco southekal rihongo rmnsingh vrdate siteslave vikramsoni2 kiitani tobyreynold nomedia jkotrba techmexorg pmoulton xwqiang bfarhat81 tennessine piousbox felixao milimetric portgasrobin lifeles666 barrybbb ayagithub23 cuongpcuet mick26 hunterloftis ratnakarm yizhl 59naga cookcat yunbran anaumov tubalu vijo bugrcvi rtwest liviuignat ttousai jungminu dudymas anders-akero heathervoyles padu faroncoder albertliang junaidpaul nguyenchilong prabhjotsl kumardeepakr3 binoyc aliyarobinson nicholas-kebbas danielreales7 astachurski challyed marcosrjjunior edqu magda777 fourkbomb mfuzzy-logic qazedx hagarwa3 nihars milanocookies93 jskdr vaguilarrebolledo adik93 yaempioy cw123456student rouabhi digisfera rodu prashant31191 sreejithp ilyi1116 wsacraf sosproduction ifa6 gityogi marcelocaixeta mikimejias santpandey rbelward sebastian4 dberesford leodufer aparhimchik alex-meteor

chat-example's Issues

Local files instead of CDN link in chat "Getting Started" instructions

The getting started guide switches from locally hosted files, when initially adding scripts to the html, to using a CDN. Here's the problematic spot, which should include a link to the CDN rather than local files:

Now in index.html I add the following snippet before the :
<script src="/socket.io/socket.io.js"></script>
<script>
 var socket = io();
</script>

Problem using local socket.io.js resource

The interactive chat doesn't work anymore with socket.io v. ^1.4.3 with locally generated socket.io.js file but :

works with version 1.2.0 and local socket.io.js;
works with version ^1.4.2 and https://cdn.socket.io/socket.io-1.2.0.js.

I would love to know what changed and how to adapt on modern Socket.io usage.

Uncaught TypeError: undefined is not a function

I get this error when changing a single line in your index.html

var socket = io();

var socket = new WebSocket('ws://192.168.1.174:10080/mcu');

I am not using Node.js, but my server does support websockets. Any idea you may have as to how I can fix this would be awesome.

Can we use this code online?

If I were to make a website with all these, would it work?

For those having trouble with logging messages to console.

It took me an embarrassingly long time to figure this out. When you include jQuery, change the script tag to a secured link. This fixed all my problems because jQuery wouldn't load in Chrome, making the jQuery we wrote before the body useless.

https://code.jquery.com/jquery-2.1.4.min.js

Edit: I'd like to add, I was following this tutorial on cloud9. Get requests are done with https, meaning I needed jQuery included using https. So this may not apply to those connecting via localhost:3000

Form submission not stopped (OSX + Chrome)

Hi,
I was programming the index.html page and I ran across an error where the return false in the $('form').submit(callback) did not actually stop the callback seen in this block:

$('form').submit(function(){
        socket.emit('chat message', $('#m').val());
        $('#m').val('');
        return false;
});

For anyone else hitting this problem I remedied it by creating a helper method and attaching it to the button. Instead of using a form element I wrapped the "form" in a div element. the code below is what worked for me to complete the example:

<!doctype html>
<html>
  <head>
    <title>Socket.IO chat</title>
    <style>
      * { margin: 0; padding: 0; box-sizing: border-box; }
      body { font: 13px Helvetica, Arial; }
      div { background: #000; padding: 3px; position: fixed; bottom: 0; width: 100%; }
      div input { border: 0; padding: 10px; width: 90%; margin-right: .5%; }
      div button { width: 9%; background: rgb(130, 224, 255); border: none; padding: 10px; }
      #messages { list-style-type: none; margin: 0; padding: 0; }
      #messages li { padding: 5px 10px; }
      #messages li:nth-child(odd) { background: #eee; }
    </style>
    <script src="/socket.io/socket.io.js"></script>
    <script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
    <script>
      var socket = io();

     // new code replacing the $('form').submit(...) bit
      function pushMessage () {
        var mess = $('#m').val();
        $('#m').val('');
        socket.emit('chat message', mess);
      }

      socket.on('chat message', function (msg) {
        $('#messages').append($('<li>').text(msg));
      });

    </script>
  </head>
  <body>
    <ul id="messages"></ul>
    <div>
      <input id="m" autocomplete="off" />
      <button onclick="pushMessage()">Send</button>
    </div>
  </body>
</html>

failed chat message event handling

In your example on http://socket.io/get-started/chat/, in index.html, the code for binding the event http://socket.io/get-started/chat/ etc is in the lines BEFORE the form is declared <form action=""> <input id="m" autocomplete="off" /><button>Send</button> </form> Which causes it to fail unless reordered! The <script> section for that code ought to go after the form has been created.

Tiny problem with package.json referencing socket.io 1.0.0 not found

Changed to 1.0.2 and all was well.

add document.ready() to the tutorial html and website

I came by this question today on SO :

http://stackoverflow.com/questions/26261059/socket-io-chat-tutorial-not-functioning-properly

We need to add document.ready to the tuto for it to work, and update the Socket.IO website too so the newbies don't panic :)

$( document ).ready(function() {
var socket = io();
$('form').submit(function(){
socket.emit('chat message', $('#m').val());
$('#m').val('');
return false;
});
});

socket.io error on client side

I am getting this error while loading index.html. Need help.

The connection to ws://localhost:3000/socket.io/?EIO=3&transport=websocket&sid=zDCPxairx0Xm_Jk2AAAB was interrupted while the page was loading.

Error at the moment to enter the page in windows

Hi!

When I run this example and enter the page I have this error:

socket.on('chat message') does not get triggered

I am able to successfully create socket connection and print chat message on Node.js console. Which confirms that sending message via socket works. However I am not able to make the
socket.on('chat message' event work on HTML.

Note: There is no error shown in browser console

io.on not sending console.log

I have this in package

   {
      "name": "socket-chat-example",
      "version": "0.0.1",
      "description": "my first socket.io app",
      "dependencies": {
        "express": "^4.10.2",
        "socket.io": "^1.3.5"
     }
}

this in my html

<!doctype html>
<html>
  <head>
    <title>Socket.IO chat</title>
    <style>
      * { margin: 0; padding: 0; box-sizing: border-box; }
      body { font: 13px Helvetica, Arial; }
      form { background: #000; padding: 3px; position: fixed; bottom: 0; width: 100%; }
      form input { border: 0; padding: 10px; width: 90%; margin-right: .5%; }
      form button { width: 9%; background: rgb(130, 224, 255); border: none; padding: 10px; }
      #messages { list-style-type: none; margin: 0; padding: 0; }
      #messages li { padding: 5px 10px; }
      #messages li:nth-child(odd) { background: #eee; }
    </style>
  </head>

  <body>
    <ul id="messages"></ul>
    <form action="">
      <input id="m" autocomplete="off" /><button>Send</button>
    </form>
  </body>
  <script src="https://cdn.socket.io/socket.io-1.2.0.js"></script>
<script src="http://code.jquery.com/jquery-1.11.1.js"></script>
<script>
$(document).ready(function(){
  var socket = io();
  $('form').submit(function(){
    socket.emit('chat message', $('#m').val());
    $('#m').val('');
    return false;
  });
  socket.on('chat message', function(msg){
    $('#messages').append($('<li>').text(msg));
  });
});
</script>
</html>

this is in index.js

var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);

app.get('/',function(req,res){
    res.sendFile(__dirname + '/index.html');
});

io.on('connection', function(socket){
    socket.on('chat message', function(msg){
        io.emit('chat message: ', msg);
    });
});

http.listen(3000,function(){
    console.log('lisenting on *:3000');
});

For some reason the io.on in index.js wasn't writing to console.log in the middle of tut. and i assumed it was something wrong with windows since alot of console.log doesn't show in CMD.

Anyways does anyone have clue as to why this isn't working? has something depreciated in socket.io that doesn't allow this tutorial to work anymore or is it something specific to windows machines? Thanks for your response

Failed to load resource

Hello there I'm working with:

Ubutu 14.04
Express 4.10.2
Socket.io 1.3.7

Vagrant
Port fowarding :8001 to Box :80
Port fowarding :8002 to Box :3000

This is my App.js

var express = require('express');
var app = express();
var server = app.listen(3000);

var io = require('socket.io').listen(server);
var http = require('http');

io.on('connection', function(socket){
console.log('a user connected');
socket.on('disconnect', function(){
console.log('user disconnected');
});
});

and this is my index.html

<!doctype html>

<title>Socket.IO chat</title> <style> \* { margin: 0; padding: 0; box-sizing: border-box; } body { font: 13px Helvetica, Arial; } form { background: #000; padding: 3px; position: fixed; bottom: 0; width: 100%; } form input { border: 0; padding: 10px; width: 90%; margin-right: .5%; } form button { width: 9%; background: rgb(130, 224, 255); border: none; padding: 10px; } #messages { list-style-type: none; margin: 0; padding: 0; } #messages li { padding: 5px 10px; } #messages li:nth-child(odd) { background: #eee; } </style>

Send <script src="https://cdn.socket.io/socket.io-1.3.7.js"></script> <script src="http://code.jquery.com/jquery-1.11.1.js"></script> <script> var socket = io.connect(); </script>

then when I open in the browser the index page I get:

Failed to load resource: the server responded with a status of 404 (Not Found)
http://127.0.0.1:8001/socket.io/?EIO=3&transport=polling&t=1451934295598-10

any idea how to solve it?

jquery src link

<script src="http://code.jquery.com/jquery-1.11.1.js"></script>
It should be served over https.

EDIT: I see there is already a PR (#30) for this... Please merge it.

Filepath error using sendFile instead of sendfile

The tutorial is inconsistent about using res.sendfile or res.sendFile. If res.sendFile is used (since sendfile is deprecated), using

res.sendFile('index.html');

doesn't work, throwing an error about the path not being specified properly. Here's what I did to fix it:

res.sendFile(__dirname + '/index.html');

http.listen vs app.listen

In the index.js the app object is being passed into http.Server(), which is later on called with http.listen(). Is there any difference or upside to this method over just using express' builtin app.listen();? Why and how does this work?

How to include socket.io.js (client) file in html?

Hello,

I want to include socket.io.js (client) file into index.html without using CDN. I have put socket.io.js into project's root directory. But when I'm trying to open the chat on browser, I'm getting 404 for that file. Here is my cod to include that file:

File have full permission.

Thanks

Fork

The chat example will now be maintained here: https://github.com/socketio/chat-example

Thanks!