mirror of
https://github.com/MetinSeylan/Vue-Socket.io.git
synced 2025-04-16 15:21:28 +02:00
v2
This commit is contained in:
Metin Seylan
parent
88d8479209
commit
7f5fac27d0
16 changed files with 198 additions and 440 deletions
4
.gitignore
vendored
Normal file
4
.gitignore
vendored
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
.DS_Store
|
||||
node_modules/
|
||||
npm-debug.log
|
||||
.idea/
|
||||
15
README.md
15
README.md
|
|
@ -1,24 +1,21 @@
|
|||
# Vue-Socket.io
|
||||
socket.io implemantation for vuejs
|
||||
note: this repo for vuejs 1, vuejs 2 soon
|
||||
socket.io implemantation for Vuejs 2.0 and 1.0
|
||||
|
||||
## Install
|
||||
|
||||
``` bash
|
||||
npm install vue-socket.io --save
|
||||
```
|
||||
or
|
||||
for Vue 1.0
|
||||
|
||||
``` bash
|
||||
bower install vue-socket.io
|
||||
npm install vue-socket.io@1.0.2 --save
|
||||
```
|
||||
|
||||
## Usage
|
||||
|
||||
``` js
|
||||
import VueSocketio from 'vue-socket.io'; // for ES6
|
||||
|
||||
// var VueSocketio = require('vue-socket.io') // for commonjs
|
||||
import VueSocketio from 'vue-socket.io';
|
||||
|
||||
Vue.use(VueSocketio, 'http://socketserver.com:1923'); // Automaticly socket connect from url string
|
||||
|
||||
|
|
@ -35,7 +32,7 @@ var vm = new Vue({
|
|||
connect: function(){
|
||||
console.log('socket connected')
|
||||
},
|
||||
customEmit: function(){
|
||||
customEmit: function(val){
|
||||
console.log('this method fired by socket server. eg: io.emit("customEmit", data)')
|
||||
}
|
||||
},
|
||||
|
|
@ -53,7 +50,5 @@ var vm = new Vue({
|
|||
|
||||
[Simple Chat App](http://metinseylan.com/vuesocketio/)
|
||||
|
||||
|
||||
|
||||
## License
|
||||
[WTFPL](http://www.wtfpl.net/)
|
||||
|
|
|
|||
24
bower.json
24
bower.json
|
|
@ -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"
|
||||
]
|
||||
}
|
||||
4
dist/build.js
vendored
Normal file
4
dist/build.js
vendored
Normal file
File diff suppressed because one or more lines are too long
1
dist/build.js.map
vendored
Normal file
1
dist/build.js.map
vendored
Normal file
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;
|
||||
}
|
||||
}
|
||||
17
package.json
17
package.json
|
|
@ -1,10 +1,10 @@
|
|||
{
|
||||
"name": "vue-socket.io",
|
||||
"version": "1.0.1",
|
||||
"version": "2.0.0",
|
||||
"description": "socket.io implemantation for vuejs",
|
||||
"main": "vue-socketio.js",
|
||||
"main": "dist/build.js",
|
||||
"scripts": {
|
||||
"test": "echo \"Error: no test specified\" && exit 1"
|
||||
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
|
|
@ -15,7 +15,8 @@
|
|||
"socket",
|
||||
"vue",
|
||||
"socket",
|
||||
"socket.io"
|
||||
"socket.io",
|
||||
"comolokko"
|
||||
],
|
||||
"author": "Metin Seylan",
|
||||
"license": "MIT",
|
||||
|
|
@ -25,5 +26,13 @@
|
|||
"homepage": "https://github.com/MetinSeylan/Vue-Socket.io#readme",
|
||||
"dependencies": {
|
||||
"socket.io-client": "^1.4.6"
|
||||
},
|
||||
"devDependencies": {
|
||||
"babel-cli": "^6.11.4",
|
||||
"babel-loader": "^6.2.5",
|
||||
"babel-preset-es2015": "^6.3.13",
|
||||
"babel-preset-stage-0": "^6.3.13",
|
||||
"cross-env": "^2.0.0",
|
||||
"webpack": "^1.13.2"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
48
src/Emitter.js
Normal file
48
src/Emitter.js
Normal file
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
40
src/Main.js
Normal file
40
src/Main.js
Normal file
|
|
@ -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)
|
||||
});
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
33
src/Observer.js
Normal file
33
src/Observer.js
Normal file
|
|
@ -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
vue-socketio.min.js
vendored
1
vue-socketio.min.js
vendored
|
|
@ -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)}();
|
||||
50
webpack.config.js
Normal file
50
webpack.config.js
Normal file
|
|
@ -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…
Add table
Reference in a new issue