Skip to content

Commit d3025a3

Browse files
febrihidayanfebrihidayan
committed
init commit
0 parents  commit d3025a3

15 files changed

+9130
-0
lines changed

‎.github/workflows/gh-pages.yml

+42
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
name: github pages
2+
3+
on:
4+
push:
5+
branches:
6+
- main
7+
8+
jobs:
9+
deploy:
10+
runs-on: ubuntu-18.04
11+
steps:
12+
- name: Checkout
13+
uses: actions/checkout@v2
14+
15+
- name: Setup Node
16+
uses: actions/setup-node@v2
17+
with:
18+
node-version: '12'
19+
check-latest: true
20+
21+
- name: Cache dependencies
22+
uses: actions/cache@v2
23+
with:
24+
path: ~/.npm
25+
key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
26+
restore-keys: |
27+
${{ runner.os }}-node-
28+
- run: npm install -g @vue/cli@latest
29+
30+
- name: Build App
31+
working-directory: .
32+
run: |
33+
rm -rf node_modules
34+
npm install
35+
npm run build
36+
npm run socket
37+
38+
- name: Deploy
39+
uses: peaceiris/actions-gh-pages@v3
40+
with:
41+
github_token: ${{ secrets.GITHUB_TOKEN }}
42+
publish_dir: ./dist

‎.gitignore

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
.DS_Store
2+
node_modules
3+
/dist
4+
5+
6+
# local env files
7+
.env.local
8+
.env.*.local
9+
10+
# Log files
11+
npm-debug.log*
12+
yarn-debug.log*
13+
yarn-error.log*
14+
pnpm-debug.log*
15+
16+
# Editor directories and files
17+
.idea
18+
.vscode
19+
*.suo
20+
*.ntvs*
21+
*.njsproj
22+
*.sln
23+
*.sw?

‎README.md

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
# Membuat Realtime Chat Socket.io dan Vue.js
2+
3+
## Instal dulu
4+
```
5+
npm install
6+
```
7+
atau menggunakan yarn
8+
```
9+
yarn
10+
```
11+
## Menjalankan
12+
```
13+
yarn serve
14+
```
15+
## Menjalankan server websocket (socket.io)
16+
```
17+
yarn socket
18+
```

‎babel.config.js

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
module.exports = {
2+
presets: [
3+
'@vue/cli-plugin-babel/preset'
4+
]
5+
}

‎package.json

+52
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
{
2+
"name": "realtime-chat",
3+
"description": "Contoh aplikasi realtime chat dengan Socket.io dan Vue.js",
4+
"author": {
5+
"name": "Febri Hidayan",
6+
"email": "[email protected]"
7+
},
8+
"version": "0.1.0",
9+
"private": true,
10+
"scripts": {
11+
"serve": "vue-cli-service serve",
12+
"build": "vue-cli-service build",
13+
"lint": "vue-cli-service lint",
14+
"socket": "node server.js"
15+
},
16+
"dependencies": {
17+
"core-js": "^3.6.5",
18+
"express": "^4.17.1",
19+
"socket.io": "^3.0.5",
20+
"socket.io-client": "^3.0.5",
21+
"vue": "^3.0.0",
22+
"vue-router": "4"
23+
},
24+
"devDependencies": {
25+
"@vue/cli-plugin-babel": "~4.5.0",
26+
"@vue/cli-plugin-eslint": "~4.5.0",
27+
"@vue/cli-service": "~4.5.0",
28+
"@vue/compiler-sfc": "^3.0.0",
29+
"babel-eslint": "^10.1.0",
30+
"eslint": "^6.7.2",
31+
"eslint-plugin-vue": "^7.0.0-0"
32+
},
33+
"eslintConfig": {
34+
"root": true,
35+
"env": {
36+
"node": true
37+
},
38+
"extends": [
39+
"plugin:vue/vue3-essential",
40+
"eslint:recommended"
41+
],
42+
"parserOptions": {
43+
"parser": "babel-eslint"
44+
},
45+
"rules": {}
46+
},
47+
"browserslist": [
48+
"> 1%",
49+
"last 2 versions",
50+
"not dead"
51+
]
52+
}

‎public/favicon.ico

4.19 KB
Binary file not shown.

‎public/index.html

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<!DOCTYPE html>
2+
<html lang="">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width,initial-scale=1.0">
7+
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
8+
<title><%= htmlWebpackPlugin.options.title %></title>
9+
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/bulma/0.9.1/css/bulma.min.css'/>
10+
</head>
11+
<body>
12+
<noscript>
13+
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
14+
</noscript>
15+
<div id="app"></div>
16+
<!-- built files will be auto injected -->
17+
</body>
18+
</html>

‎server.js

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
const app = require("express")()
2+
const server = require("http").createServer(app)
3+
const io = require("socket.io")(server, {
4+
cors: {
5+
origin: 'https://sekolahprogram.github.io/membuat-realtime-chat-socketio-vuejs'
6+
}
7+
})
8+
9+
10+
io.on('connection', (socket) => {
11+
socket.on('send-content', (data) => {
12+
socket.broadcast.emit('get-content', data)
13+
})
14+
})
15+
16+
server.listen()

‎src/App.vue

+43
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
<template>
2+
<nav class="navbar has-shadow">
3+
<div class="container">
4+
<div class="navbar-brand">
5+
<router-link :to="{name:'home'}" class="navbar-item">Realtime Chat</router-link>
6+
<a
7+
@click="isNavbar = !isNavbar"
8+
:class="[`navbar-burger`, {
9+
'is-active': isNavbar
10+
}]"
11+
>
12+
<span></span>
13+
<span></span>
14+
<span></span>
15+
</a>
16+
</div>
17+
<div
18+
:class="[`navbar-menu`, {
19+
'is-active': isNavbar
20+
}]"
21+
>
22+
<div class="navbar-end">
23+
<router-link :to="{name:'chat'}" class="navbar-item">Chat</router-link>
24+
</div>
25+
</div>
26+
</div>
27+
</nav>
28+
<section class="section">
29+
<div class="container">
30+
<router-view />
31+
</div>
32+
</section>
33+
</template>
34+
35+
<script>
36+
export default {
37+
data() {
38+
return {
39+
isNavbar: false
40+
}
41+
}
42+
}
43+
</script>

‎src/main.js

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import { createApp } from 'vue'
2+
import App from './App.vue'
3+
import router from './router'
4+
5+
createApp(App)
6+
.use(router)
7+
.mount('#app')

‎src/pages/chat.vue

+84
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
<template>
2+
<div class="columns is-centered">
3+
<div class="column is-6">
4+
<form @submit.prevent="submit" method="post">
5+
<div class="field">
6+
<div class="control">
7+
<input v-model="content" type="text" class="input" placeholder="tulis pesan...">
8+
</div>
9+
</div>
10+
</form>
11+
<div class="content mt-5">
12+
<div class="columns is-multiline is-mobile">
13+
<template
14+
v-for="(item, index) in data"
15+
:key="index"
16+
>
17+
<div class="column is-6">
18+
<article v-if="item.name != name" class="message">
19+
<div class="message-header">
20+
<strong>{{ item.name }}</strong>
21+
</div>
22+
<div class="message-body">
23+
{{ item.content }}
24+
</div>
25+
</article>
26+
</div>
27+
<div class="column is-6">
28+
<article v-if="item.name == name" class="message">
29+
<div class="message-body">
30+
{{ item.content }}
31+
</div>
32+
</article>
33+
</div>
34+
</template>
35+
</div>
36+
</div>
37+
</div>
38+
</div>
39+
</template>
40+
41+
<script>
42+
import io from 'socket.io-client'
43+
44+
export default {
45+
data() {
46+
return {
47+
socket: io(),
48+
name: '',
49+
content: '',
50+
data: []
51+
}
52+
},
53+
54+
created() {
55+
this.socket.on('get-content', (data) => {
56+
this.data.unshift(data)
57+
})
58+
},
59+
60+
methods: {
61+
submit() {
62+
let obj = {
63+
name: this.name,
64+
content: this.content
65+
}
66+
67+
this.data.unshift(obj)
68+
this.socket.emit('send-content', obj)
69+
70+
this.content = ''
71+
}
72+
},
73+
74+
mounted() {
75+
if (localStorage.getItem('name')) {
76+
this.name = localStorage.getItem('name')
77+
} else {
78+
this.$router.push({
79+
name: 'login'
80+
})
81+
}
82+
}
83+
}
84+
</script>

‎src/pages/index.vue

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
<template>
2+
<section class="section">
3+
<div class="container has-text-centered">
4+
<h1 class="title">Aplikasi Realtime Chat dengan Socket.io dan Vue.js</h1>
5+
<router-link :to="{name:'chat'}" class="button is-primary">Lihat Chat</router-link>
6+
</div>
7+
</section>
8+
</template>

‎src/pages/login.vue

+43
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
<template>
2+
<div class="columns is-centered">
3+
<div class="column is-6">
4+
<form @submit.prevent="submit" method="post">
5+
<div class="field">
6+
<div class="control">
7+
<input v-model="name" type="text" class="input" placeholder="masukan nama...">
8+
</div>
9+
</div>
10+
<div class="field">
11+
<button type="submit" class="button is-primary">Masuk</button>
12+
</div>
13+
</form>
14+
</div>
15+
</div>
16+
</template>
17+
18+
<script>
19+
export default {
20+
data() {
21+
return {
22+
name: ''
23+
}
24+
},
25+
26+
methods: {
27+
submit() {
28+
localStorage.setItem('name', this.name);
29+
this.$router.push({
30+
name: 'chat'
31+
})
32+
}
33+
},
34+
35+
mounted() {
36+
if (localStorage.getItem('name')) {
37+
this.$router.push({
38+
name: 'chat'
39+
})
40+
}
41+
}
42+
}
43+
</script>

0 commit comments

Comments
 (0)