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