Metin Seylan
8 years ago
parent
88d8479209
commit
7f5fac27d0
@ -0,0 +1,4 @@
|
|||||||
|
.DS_Store
|
||||||
|
node_modules/
|
||||||
|
npm-debug.log
|
||||||
|
.idea/
|
||||||
@ -1,24 +0,0 @@
|
|||||||
{
|
|
||||||
"name": "vue-socket.io",
|
|
||||||
"description": "Socket.io implemantation for VueJs",
|
|
||||||
"main": "vue-socketio.js",
|
|
||||||
"authors": [
|
|
||||||
"Metin Seylan"
|
|
||||||
],
|
|
||||||
"license": "MIT",
|
|
||||||
"keywords": [
|
|
||||||
"vuejs",
|
|
||||||
"socket",
|
|
||||||
"vue",
|
|
||||||
"socket",
|
|
||||||
"socket.io"
|
|
||||||
],
|
|
||||||
"homepage": "https://github.com/MetinSeylan/Vue-Socket.io",
|
|
||||||
"ignore": [
|
|
||||||
"**/.*",
|
|
||||||
"node_modules",
|
|
||||||
"bower_components",
|
|
||||||
"test",
|
|
||||||
"tests"
|
|
||||||
]
|
|
||||||
}
|
|
||||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -1,70 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
||||||
|
|
||||||
<title>Vue-Socket.io</title>
|
|
||||||
|
|
||||||
<!-- Bootstrap -->
|
|
||||||
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
|
|
||||||
<link rel="stylesheet" href="style.css">
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
|
|
||||||
<h1 class="text-center">Vue-Socket.io</h1>
|
|
||||||
|
|
||||||
<div class="container">
|
|
||||||
<div v-if="!join" id="join" class="text-center">
|
|
||||||
<form @submit.prevent="joinChat(name)">
|
|
||||||
<div class="form-group">
|
|
||||||
<input type="text" max="12" class="form-control input-lg text-center" v-model="name" placeholder="Name">
|
|
||||||
</div>
|
|
||||||
<button class="btn btn-primary btn-lg" type="submit">Join Chat</button>
|
|
||||||
<br>
|
|
||||||
<a href="https://github.com/metinseylan/vue-socket.io">Github</a>
|
|
||||||
</form>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div v-if="join" id="group">
|
|
||||||
<div class="users">
|
|
||||||
<h4>Users</h4>
|
|
||||||
<ul class="list-unstyled">
|
|
||||||
<li v-for="user in users" track-by="$index">{{user}}</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<div class="chat">
|
|
||||||
|
|
||||||
<div class="messages">
|
|
||||||
<ul class="list-unstyled">
|
|
||||||
<li v-for="m in messages" :class="{me: (m.name === name), clearfix: true}">
|
|
||||||
<div class="name">{{m.name}}</div>
|
|
||||||
<span>{{m.message}}</span>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<div class="input">
|
|
||||||
<form @submit.prevent="send(message)">
|
|
||||||
<div class="input-group">
|
|
||||||
<input type="text" class="form-control" v-model="message" placeholder="uyudun mu?...">
|
|
||||||
<span class="input-group-btn">
|
|
||||||
<button class="btn btn-default" type="submit">-></button>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
|
|
||||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.22/vue.min.js"></script>
|
|
||||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/1.4.6/socket.io.min.js"></script>
|
|
||||||
<script src="../vue-socketio.min.js"></script>
|
|
||||||
<script src="script.js"></script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@ -1,49 +0,0 @@
|
|||||||
Vue.use(VueSocketio, 'http://metinseylan.com:1923');
|
|
||||||
|
|
||||||
new Vue({
|
|
||||||
el: '.container',
|
|
||||||
data: {
|
|
||||||
join: false,
|
|
||||||
name: null,
|
|
||||||
users: null,
|
|
||||||
message: null,
|
|
||||||
messages: {}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
joinChat: function (name) {
|
|
||||||
if (name) {
|
|
||||||
this.$socket.emit('join', name);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
send: function (message) {
|
|
||||||
if (message) {
|
|
||||||
this.$socket.emit('send', message);
|
|
||||||
this.$set('message', null);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
watch: {
|
|
||||||
messages: function () {
|
|
||||||
setTimeout(function () {
|
|
||||||
$('.messages ul').scrollTop(999999999);
|
|
||||||
}, 100)
|
|
||||||
}
|
|
||||||
},
|
|
||||||
sockets: {
|
|
||||||
users: function (users) {
|
|
||||||
this.$set('users', users);
|
|
||||||
},
|
|
||||||
joined: function () {
|
|
||||||
this.$set('join', true)
|
|
||||||
},
|
|
||||||
messages: function (data) {
|
|
||||||
this.$set('messages', data);
|
|
||||||
},
|
|
||||||
onmessage: function (data) {
|
|
||||||
this.messages.push(data);
|
|
||||||
},
|
|
||||||
adduser: function (user) {
|
|
||||||
this.users.push(user);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
@ -1,64 +0,0 @@
|
|||||||
var socket = require('socket.io');
|
|
||||||
|
|
||||||
var io = socket.listen(1923);
|
|
||||||
|
|
||||||
var users = [];
|
|
||||||
var messages = [];
|
|
||||||
|
|
||||||
var names = [];
|
|
||||||
|
|
||||||
io.on('connection', function(client){
|
|
||||||
|
|
||||||
|
|
||||||
client.on('join', function(name){
|
|
||||||
|
|
||||||
client.join('chat');
|
|
||||||
|
|
||||||
users.push(name);
|
|
||||||
names[client.id] = name;
|
|
||||||
|
|
||||||
client.emit('users', users);
|
|
||||||
client.emit('messages', messages);
|
|
||||||
client.emit('joined', true);
|
|
||||||
client.broadcast.emit('adduser', name);
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
client.on('send', function(message){
|
|
||||||
|
|
||||||
var data = {
|
|
||||||
name: names[client.id],
|
|
||||||
message: message
|
|
||||||
};
|
|
||||||
|
|
||||||
if(messages.length > 10){
|
|
||||||
messages.splice(0, 10);
|
|
||||||
}
|
|
||||||
|
|
||||||
messages.push(data);
|
|
||||||
|
|
||||||
io.emit('onmessage', data);
|
|
||||||
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
client.on('disconnect', function(){
|
|
||||||
|
|
||||||
var name = names[client.id];
|
|
||||||
|
|
||||||
|
|
||||||
delete names[client.id];
|
|
||||||
|
|
||||||
var index = users.indexOf(name);
|
|
||||||
|
|
||||||
if(index!=-1){
|
|
||||||
delete users[index];
|
|
||||||
}
|
|
||||||
users = users.filter(Boolean)
|
|
||||||
|
|
||||||
io.emit('users', users);
|
|
||||||
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
});
|
|
||||||
@ -1,133 +0,0 @@
|
|||||||
body {
|
|
||||||
color: #373a3c;
|
|
||||||
background-color: #f9f9f9;
|
|
||||||
}
|
|
||||||
|
|
||||||
* {
|
|
||||||
border-radius: 0 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.container {
|
|
||||||
max-width: 700px;
|
|
||||||
box-shadow: 0 2px 3px rgba(0, 0, 0, .05);
|
|
||||||
background-color: #fff;
|
|
||||||
border: 1px solid #eee;
|
|
||||||
padding: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.users {
|
|
||||||
border-right: 1px solid #eee;
|
|
||||||
float: left;
|
|
||||||
width: 140px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.users ul {
|
|
||||||
height: 250px;
|
|
||||||
overflow-y: scroll;
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.users h4 {
|
|
||||||
margin: 0;
|
|
||||||
border-bottom: 1px solid #eee;
|
|
||||||
padding-bottom: 3px;
|
|
||||||
margin-bottom: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
::-webkit-scrollbar {
|
|
||||||
width: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
::-webkit-scrollbar-thumb {
|
|
||||||
background: #666;
|
|
||||||
}
|
|
||||||
|
|
||||||
.chat {
|
|
||||||
width: 528px;
|
|
||||||
float: left;
|
|
||||||
padding-left: 15px;
|
|
||||||
position: relative;
|
|
||||||
height: 278px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.chat .messages ul {
|
|
||||||
height: 240px;
|
|
||||||
margin: 0;
|
|
||||||
overflow-y: scroll;
|
|
||||||
padding-top: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.chat .messages ul li .name {
|
|
||||||
font-size: 12px;
|
|
||||||
font-weight: bold;
|
|
||||||
margin-bottom: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.chat .messages ul li {
|
|
||||||
margin-bottom: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.chat .messages ul li span {
|
|
||||||
border-radius: 5px !important;
|
|
||||||
background: #E0EDFF;
|
|
||||||
padding: 5px 12px;
|
|
||||||
font-size: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.chat .messages ul li.me {
|
|
||||||
text-align: right;
|
|
||||||
margin-right: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.chat .input {
|
|
||||||
position: absolute;
|
|
||||||
bottom: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media screen and (max-width: 768px) {
|
|
||||||
body, html {
|
|
||||||
position: relative;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
#join .btn {
|
|
||||||
display: block;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.container {
|
|
||||||
position: absolute;
|
|
||||||
width: 100%;
|
|
||||||
height: 89%;
|
|
||||||
}
|
|
||||||
|
|
||||||
h1 {
|
|
||||||
margin: 4% 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.users {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.chat {
|
|
||||||
float: none;
|
|
||||||
padding: 0;
|
|
||||||
height: 100%;
|
|
||||||
width: 100%;
|
|
||||||
position: absolute;
|
|
||||||
}
|
|
||||||
|
|
||||||
.chat .messages {
|
|
||||||
height: 90%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.chat .messages ul {
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
#group {
|
|
||||||
height: 100%;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -0,0 +1,48 @@
|
|||||||
|
export default new class {
|
||||||
|
constructor() {
|
||||||
|
this.listeners = new Map();
|
||||||
|
}
|
||||||
|
|
||||||
|
addListener(label, callback, vm) {
|
||||||
|
if(typeof callback == 'function'){
|
||||||
|
this.listeners.has(label) || this.listeners.set(label, []);
|
||||||
|
this.listeners.get(label).push({callback: callback, vm: vm});
|
||||||
|
|
||||||
|
return true
|
||||||
|
}
|
||||||
|
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
|
||||||
|
removeListener(label, callback, vm) {
|
||||||
|
let listeners = this.listeners.get(label),
|
||||||
|
index;
|
||||||
|
|
||||||
|
if (listeners && listeners.length) {
|
||||||
|
index = listeners.reduce((i, listener, index) => {
|
||||||
|
return (typeof listener.callback == 'function' && listener.callback === callback && listener.vm == vm) ?
|
||||||
|
i = index :
|
||||||
|
i;
|
||||||
|
}, -1);
|
||||||
|
|
||||||
|
if (index > -1) {
|
||||||
|
listeners.splice(index, 1);
|
||||||
|
this.listeners.set(label, listeners);
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
emit(label, ...args) {
|
||||||
|
let listeners = this.listeners.get(label);
|
||||||
|
|
||||||
|
if (listeners && listeners.length) {
|
||||||
|
listeners.forEach((listener) => {
|
||||||
|
listener.callback.call(listener.vm,...args)
|
||||||
|
});
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,40 @@
|
|||||||
|
import Observer from './Observer'
|
||||||
|
import Emitter from './Emitter'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
|
||||||
|
install(Vue, connection){
|
||||||
|
|
||||||
|
if(!connection) throw new Error("[Vue-Socket.io] cannot locate connection")
|
||||||
|
|
||||||
|
let observer = new Observer(connection)
|
||||||
|
|
||||||
|
Vue.prototype.$socket = observer.Socket;
|
||||||
|
|
||||||
|
Vue.mixin({
|
||||||
|
beforeCreate(){
|
||||||
|
let _this = this;
|
||||||
|
let sockets = this.$options['sockets']
|
||||||
|
|
||||||
|
if(sockets){
|
||||||
|
Object.keys(sockets).forEach(function(key) {
|
||||||
|
Emitter.addListener(key, sockets[key], _this)
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
},
|
||||||
|
beforeDestroy(){
|
||||||
|
let _this = this;
|
||||||
|
let sockets = this.$options['sockets']
|
||||||
|
|
||||||
|
if(sockets){
|
||||||
|
Object.keys(sockets).forEach(function(key) {
|
||||||
|
Emitter.removeListener(key, sockets[key], _this)
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
@ -0,0 +1,33 @@
|
|||||||
|
import Emitter from './Emitter'
|
||||||
|
import Socket from 'socket.io-client'
|
||||||
|
|
||||||
|
export default class{
|
||||||
|
|
||||||
|
constructor(connection) {
|
||||||
|
|
||||||
|
if(typeof connection == 'string'){
|
||||||
|
this.Socket = Socket(connection);
|
||||||
|
}else{
|
||||||
|
this.Socket = connection
|
||||||
|
}
|
||||||
|
|
||||||
|
this.onEvent()
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
onEvent(){
|
||||||
|
this.Socket.onevent = (packet) => {
|
||||||
|
Emitter.emit(packet.data[0], packet.data[1])
|
||||||
|
}
|
||||||
|
|
||||||
|
let _this = this;
|
||||||
|
|
||||||
|
["connect", "error", "disconnect", "reconnect", "reconnect_attempt", "reconnecting", "reconnect_error", "reconnect_failed"]
|
||||||
|
.forEach((value) => {
|
||||||
|
_this.Socket.on(value, (data) => {
|
||||||
|
Emitter.emit(value, data)
|
||||||
|
})
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
@ -1,85 +0,0 @@
|
|||||||
;(function () {
|
|
||||||
var Socketio = typeof require === "function"
|
|
||||||
? require("socket.io-client")
|
|
||||||
: window.io;
|
|
||||||
|
|
||||||
if (!Socketio) {
|
|
||||||
throw new Error("[Vue-Socket.io] cannot locate Socket.io")
|
|
||||||
}
|
|
||||||
|
|
||||||
var VueSocketio = {
|
|
||||||
install: function (Vue, connection) {
|
|
||||||
|
|
||||||
if (!connection) {
|
|
||||||
throw new Error("[Vue-Socket.io] cannot locate connection")
|
|
||||||
}
|
|
||||||
|
|
||||||
if (typeof connection === 'string') {
|
|
||||||
var socket = Socketio(connection);
|
|
||||||
} else if (typeof connection === 'object') {
|
|
||||||
var socket = connection;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Wildcard support
|
|
||||||
* http://stackoverflow.com/questions/10405070/socket-io-client-respond-to-all-events-with-one-handler
|
|
||||||
*/
|
|
||||||
var onevent = socket.onevent;
|
|
||||||
socket.onevent = function (packet) {
|
|
||||||
var args = packet.data || [];
|
|
||||||
onevent.call(this, packet);
|
|
||||||
packet.data = ["*"].concat(args);
|
|
||||||
onevent.call(this, packet);
|
|
||||||
};
|
|
||||||
|
|
||||||
var methods = [
|
|
||||||
"connect",
|
|
||||||
"error",
|
|
||||||
"disconnect",
|
|
||||||
"reconnect",
|
|
||||||
"reconnect_attempt",
|
|
||||||
"reconnecting",
|
|
||||||
"reconnect_error",
|
|
||||||
"reconnect_failed"
|
|
||||||
];
|
|
||||||
|
|
||||||
Vue.mixin({
|
|
||||||
created: function () {
|
|
||||||
var self = this;
|
|
||||||
if (this.$options.hasOwnProperty("sockets")) {
|
|
||||||
socket.on("*", function (emit, data) {
|
|
||||||
if (self.$options.sockets.hasOwnProperty(emit)) {
|
|
||||||
self.$options.sockets[emit].call(self, data);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
methods.forEach(function (m) {
|
|
||||||
socket.on(m, function (data) {
|
|
||||||
if (self.$options.sockets.hasOwnProperty(m)) {
|
|
||||||
self.$options.sockets[m].call(self, data);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// Global socketio instance
|
|
||||||
this.$socket = socket;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
if (typeof exports == "object") {
|
|
||||||
module.exports = VueSocketio
|
|
||||||
} else if (typeof define == "function" && define.amd) {
|
|
||||||
define([], function () {
|
|
||||||
return VueSocketio
|
|
||||||
})
|
|
||||||
} else if (window.Vue) {
|
|
||||||
window.VueSocketio = VueSocketio;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
})();
|
|
||||||
@ -1 +0,0 @@
|
|||||||
!function(){var o="function"==typeof require?require("socket.io-client"):window.io;if(!o)throw new Error("[Vue-Socket.io] cannot locate Socket.io");var n={install:function(n,t){if(!t)throw new Error("[Vue-Socket.io] cannot locate connection");if("string"==typeof t)var e=o(t);else if("object"==typeof t)var e=t;var c=e.onevent;e.onevent=function(o){var n=o.data||[];c.call(this,o),o.data=["*"].concat(n),c.call(this,o)};var i=["connect","error","disconnect","reconnect","reconnect_attempt","reconnecting","reconnect_error","reconnect_failed"];n.mixin({created:function(){var o=this;this.$options.hasOwnProperty("sockets")&&(e.on("*",function(n,t){o.$options.sockets.hasOwnProperty(n)&&o.$options.sockets[n].call(o,t)}),i.forEach(function(n){e.on(n,function(t){o.$options.sockets.hasOwnProperty(n)&&o.$options.sockets[n].call(o,t)})})),this.$socket=e}})}};"object"==typeof exports?module.exports=n:"function"==typeof define&&define.amd?define([],function(){return n}):window.Vue&&(window.VueSocketio=n)}();
|
|
||||||
@ -0,0 +1,50 @@
|
|||||||
|
var path = require('path');
|
||||||
|
var webpack = require('webpack');
|
||||||
|
module.exports = {
|
||||||
|
entry: ['./src/Main.js'],
|
||||||
|
output: {
|
||||||
|
path: path.resolve(__dirname, './dist'),
|
||||||
|
filename: 'build.js',
|
||||||
|
library: ['VueSocketio'],
|
||||||
|
libraryTarget: 'umd'
|
||||||
|
},
|
||||||
|
resolveLoader: {
|
||||||
|
root: path.join(__dirname, 'node_modules'),
|
||||||
|
},
|
||||||
|
module: {
|
||||||
|
loaders: [
|
||||||
|
{
|
||||||
|
test: /\.js$/,
|
||||||
|
loader: 'babel',
|
||||||
|
exclude: /node_modules/,
|
||||||
|
query: {
|
||||||
|
presets: ['es2015']
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
test: /\.json$/,
|
||||||
|
loader: 'json'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
devtool: 'eval-source-map'
|
||||||
|
}
|
||||||
|
|
||||||
|
if (process.env.NODE_ENV === 'production') {
|
||||||
|
module.exports.devtool = 'source-map'
|
||||||
|
|
||||||
|
module.exports.plugins = (module.exports.plugins || []).concat([
|
||||||
|
new webpack.DefinePlugin({
|
||||||
|
'process.env': {
|
||||||
|
NODE_ENV: '"production"'
|
||||||
|
}
|
||||||
|
}),
|
||||||
|
new webpack.optimize.UglifyJsPlugin({
|
||||||
|
compress: {
|
||||||
|
warnings: false
|
||||||
|
}
|
||||||
|
}),
|
||||||
|
new webpack.optimize.OccurenceOrderPlugin()
|
||||||
|
])
|
||||||
|
}
|
||||||
|
|
||||||
Loading…
Reference in New Issue