Skip to content

Instantly share code, notes, and snippets.

@koba04 koba04/app.css
Last active Apr 1, 2019

Embed
What would you like to do?
socket.io chat sample by vue.js http://socket.io/get-started/chat/
* {
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;
}
var socket = io();
var vm = new Vue({
el: "#chat",
data: {
messages: [],
input: ""
},
methods: {
post: function(e) {
socket.emit('chat message', this.input);
e.preventDefault();
}
}
});
socket.on('chat message', function(msg){
vm.messages.push(msg);
});
<!doctype html>
<html>
<head>
<title>Socket.IO chat</title>
<link href="/css/app.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="chat">
<ul class="messages" >
<li v-repeat="messages" v-text="$value"></li>
</ul>
<form action="" v-on="submit: post">
<input v-model="input" autocomplete="off" /><button>Send</button>
</form>
</div>
<script src="//cdnjs.cloudflare.com/ajax/libs/vue/0.10.4/vue.js"></script>
<script src="/socket.io/socket.io.js"></script>
<script src="/js/app.js"></script>
<script>
</script>
</body>
</html>
@IvanSantos10

This comment has been minimized.

Copy link

IvanSantos10 commented May 23, 2016

asdfasdf

@kmroland

This comment has been minimized.

Copy link

kmroland commented Jun 28, 2016

vbfghfgh

@kmroland

This comment has been minimized.

Copy link

kmroland commented Jun 28, 2016

  • looks like something great
@MetinSeylan

This comment has been minimized.

Copy link

MetinSeylan commented Jul 1, 2016

@rmagnum2002

This comment has been minimized.

Copy link

rmagnum2002 commented Dec 24, 2016

Looks like @IvanSantos10 and @kmroland tried the realtime chat right here in comments :D
Did you guys got the expected the result?

@ibbatta

This comment has been minimized.

Copy link

ibbatta commented Jan 18, 2017

Uhm doesn't work

@wlsgussla123

This comment has been minimized.

Copy link

wlsgussla123 commented Jun 12, 2017

it works ! gooooooooooooooooooood

@LuiszzAlf

This comment has been minimized.

Copy link

LuiszzAlf commented Nov 8, 2017

ok

@sreitmaier

This comment has been minimized.

Copy link

sreitmaier commented Apr 23, 2018

saSAsaS

@b781rev

This comment has been minimized.

Copy link

b781rev commented Aug 18, 2018

Hhj

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.