Skip to content

Instantly share code, notes, and snippets.

@shyampurk
Last active July 2, 2019 10:50
Show Gist options
  • Save shyampurk/e17692c6df9a2afed0e06e9a5c23cf8d to your computer and use it in GitHub Desktop.
Save shyampurk/e17692c6df9a2afed0e06e9a5c23cf8d to your computer and use it in GitHub Desktop.
public function addUser(Request $request) {
$username1 = $request->get('username');
$username2 = $request->get('remoteUsername');
$exists = User::where('username',$username2)->first();
$callingUser = User::where('username',$username1)->first();
$uuid1 = $callingUser->uuid;
if($exists) {
$uuid2 = $exists->uuid;
$pubnub = new PubnubConfig($uuid1);
$pubnub->grantOne($uuid1,$uuid2);
return response()->json($uuid2);
}
else {
return response()->json("404");
}
}
<template>
<div class="chat-container">
<div class="heading">
<h1>{{ title + username}}</h1>
</div>
<div class="body">
<friend-list :username = "username"></friend-list>
<div class="right-body">
<div class="table">
<chat-log :username = "username" v-chat-scroll></chat-log>
<message-input :username = "username" :authUUID= "authUUID"></message-input>
</div>
</div>
</div>
</div>
</template>
<template>
<div
class="chat-log"
ref="chatLogContainer"
>
<message-bubble
v-for="(message,index) in getCurrentChatMessages"
:key="index"
:time="message.time"
:text="message.text"
:from="message.username"
></message-bubble>
</div>
</template>
created() {
this.$pnSubscribe({
channels: [this.currentChat]
})
}
watch: {
currentChat: function() {
let currentChatKey = []
currentChatKey.push(this.currentChat)
this.$pnSubscribe({
channels: currentChatKey
})
let mL = []
Pubnub.getInstance().history({
channel: currentChatKey,
count: 15, // how many items to fetch
stringifiedTimeToken: true, // false is the default
})
.then(response => {
response.messages.forEach(message => {
mL.push(message.entry)
this.$store.state.friends.forEach(friend => {
if(friend.chatKey == this.currentChat) {
friend.lastMessage = message.entry.text
}
})
})
})
this.$store.commit('updateChat',{chatKey: this.currentChat,messages: mL})
this.incomingMessage = this.$pnGetMessage(this.currentChat,this.storeMessages)
}
}
<template>
<div class="friend-list">
<div class="new-chat">
<div class="add-one-one" @click="newChat">+</div>
<div class="name-input">
<input v-model="friendUsername" type="text" placeholder="Friend's Username">
</div>
</div>
<friend-list-item
v-for="(friend, index) of friends"
:key="index"
:index="index"
:name="friend.name"
></friend-list-item>
</div>
</template>
checkAndAdd(msg) {
if(msg.message.toName == this.username) {
let subscribedChannels = []
this.$store.state.friends.push({name: msg.message.fromName, chatKey: msg.message.chatKey, lastMessage: ''})
this.$store.state.friends.forEach(friend => {
subscribedChannels.push(friend.chatKey)
})
this.$pnSubscribe({
channels: subscribedChannels
});
let mL = []
Pubnub.getInstance().history({
channel: msg.message.chatKey,
count: 15, // how many items to fetch
stringifiedTimeToken: true, // false is the default
})
.then(response => {
response.messages.forEach(message => {
mL.push(message.entry)
this.$store.state.friends.forEach(friend => {
if(friend.chatKey == msg.message.chatKey) {
friend.lastMessage = message.entry.text
}
})
})
})
this.$store.commit('addChat',{chatKey: msg.message.chatKey, messages: mL})
//console.log(this.$store.state.friends)
}
}
newChat() {
let uri = domain + "/api/add"
if(this.username != this.friendUsername) {
axios.post(uri,{remoteUsername: this.friendUsername, username: this.username})
.then(response => {
if(response.data != "404") {
// console.log(this.$store.state.friends)
// console.log(this.alreadyExists(this.friendUsername))
if(!this.alreadyExists(this.friendUsername)) {
let friendChannel = this.$store.state.user.uuid + "-" + response.data
let mL = []
this.$store.state.friends.push({name: this.friendUsername, chatKey: friendChannel, lastMessage: ''})
Pubnub.getInstance().history({
channel: friendChannel,
count: 15, // how many items to fetch
stringifiedTimeToken: true, // false is the default
})
.then(response1 => {
response1.messages.forEach(message => {
mL.push(message.entry)
this.$store.state.friends.forEach(friend => {
if(friend.chatKey == friendChannel) {
friend.lastMessage = message.entry.text
}
})
})
})
this.$store.commit('addChat',{chatKey: friendChannel, messages: mL})
this.$pnPublish({
channel: 'control',
message: {
fromName: this.username,
toName: this.friendUsername,
chatKey: this.$store.state.user.uuid + "-" + response.data
}
})
}
}
let sc = []
this.$store.state.friends.forEach(friend => {
sc.push(friend.chatKey)
})
this.$pnSubscribe({
channels: sc
});
})
}
}
<template>
<div class = "friend-list-item" :class = "selected" @click= "onFocus" :id = "name">
<img :src ="profileImg" />
<div class="text">
<span class="name" :id = "name">{{ name }}</span>
<span class="lastMessage" :id = "name">{{lastMessage}}</span>
</div>
</div>
</template>
computed: {
chatKey() {
return this.$store.state.friends[this.index].chatKey;
},
...mapState([
'user','friends','currentChat'
]),
selected() {
return this.$store.state.currentChat === this.chatKey ? 'selected' : '';
},
avatarSrc() {
return defaultProfileImg
},
lastMessage() {
return this.$store.state.friends[this.index].lastMessage
}
}
methods: {
onFocus(event) {
EventBus.$emit('focus-input', event);
this.$store.commit('setCurrentChat', {chatKey: this.chatKey});
},
}
<template>
<div class = "home">
<div class = "row">
<div class="col l2"></div>
<div class = "col l4">
<div class = "card" id = "left">
<div class = "card-header">
<h5 class = "card-title center-align card-heading">Sign up</h5>
</div>
<div class="card-content">
<form @submit.prevent = "signUp">
<label for = "username">Username</label>
<input type = "text" id = "username" name = "username" v-model = "username" required/><br><br>
<label for = "password">Password</label>
<input type = "password" name = "password" id = "password" v-model = "password" required/><br><br>
<label for = "password_confirmation">Re-enter Password</label>
<input type = "password" name = "password_confirmation" id = "password_confirmation" v-model = "passwordConfirmation" required/>
<div class="center-align">
<p class = "red-text darken-2">
<span v-for = "(error,index) in errors" :key = "index">{{error}}</span><br>
</p>
<p class = "green-text darken-2" v-if = "validated">Data validated</p>
<button type = "submit" class = "btn btn-medium black">Sign up</button>
</div>
</form>
</div>
</div>
</div>
<div class="col l4">
<div class = "card" id = "right">
<div class = "card-header">
<h5 class = "card-title card-heading center-align">Sign in</h5>
</div>
<div class="card-content">
<form @submit.prevent = "signIn">
<label for = "username_signin">Username</label>
<input type = "text" name = "username_signin" id = "username_signin" v-model = "usernameSignin"><br><br>
<label for = "password_signin">Password</label>
<input type = "password" name = "password_signin" id = "password_signin" v-model = "passwordSignin"><br><br>
<div class="center-align" id = "signin-btn">
<p class = "red-text darken-2">
<span v-for = "(error,index) in errorsSignin" :key = "index">{{error}}</span><br>
</p>
<p class = "green-text darken-2" v-if = "validatedSignin">Data validated</p>
<button type = "submit" class = "btn btn-medium black">Sign in</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</template>
<template>
<div class="message-bubble" :class="me">
<span class="from" :class="isGlobal">{{ from }}</span>
<br :class="me + ' ' + isGlobal">
<span class="message-text">{{ text }}</span>
</div>
</template>
<template>
<div class="message-input">
<input type = "text" placeholder="Your message here" @keydown.enter="submitMessage" v-model = "message" class = "messageInput input-field">
</div>
</template>
submitMessage() {
this.$pnPublish({
channel: this.currentChat,
message: {
username: this.username,
text: this.message,
time: Date.now(),
channel : this.currentChat
}
})
this.message = '';
}
public function signIn(Request $request) {
$username = $request->get('username');
$password = $request->get('password');
$exists = User::where('username',$username)->first();
$pubnub = new PubnubConfig($exists->uuid);
$pubnub->grantGlobal($exists->uuid);
if($exists) {
$passwordCorrect = Hash::check($password,$exists->password);
return response()->json($passwordCorrect);
}
}
signIn() {
if(this.usernameSignin && this.passwordSignin) {
this.errorsSignin = []
let uri = domain + "/api/signin"
axios.post(uri,{username: this.usernameSignin, password: this.passwordSignin})
.then(response => {
if(response.data == true) {
this.validatedSignin = true
this.$router.push({name: 'chat', params: {username: this.usernameSignin, auth: true}})
}
else {
this.validatedSignin = false
this.errorsSignin.push("Please check your credentials")
}
}).catch(err => {
console.log(err)
})
}
}
public function signUp(Request $request) {
$username = $request->get('username');
$exists = User::where('username',$username)->first();
if($exists) {
return response()->json("failed");
}
else {
$uuid = $request->get('uuid');
$pubnub = new PubnubConfig($uuid);
$pubnub->grantGlobal($uuid);
$password = bcrypt($request->get('password'));
User::create([
'uuid' => $uuid,
'username' => $username,
'password' => $password
]);
return response()->json("success");
}
}
signUp() {
if(this.username && this.password && this.passwordConfirmation) {
this.errors = []
if(this.password === this.passwordConfirmation) {
this.errors = []
let uri = domain + "/api/signup"
axios.post(uri,{uuid: this.$uuid.v4(), username: this.username, password: this.password})
.then(response => {
if(response.data == "success") {
this.validated = true
this.$router.push({name: 'chat', params: {username: this.username, auth: true}})
}
else {
this.validated = false
this.errors.push("Username already exists")
}
}).catch(err => {
console.log("Check your controller logic")
})
}
else {
this.errors.push('Passwords do not match')
}
}
else {
this.errors.push('Please make sure you\'ve entered all the required fields')
}
}
export default new Vuex.Store({
state: {
user: {},
friends: [],
currentChat: 'global',
chats: [
{chatKey: "global", messages: []},
]
},
getters: {
getCurrentChatMessages(state) {
return state.chats.find(chat =>
chat.chatKey == state.currentChat
).messages
},
},
mutations: {
setCurrentChat(state, {chatKey}) {
state.currentChat = chatKey;
},
addChat(state,chat) {
state.chats.push(chat)
},
updateChat(state,payload) {
state.chats.forEach(chat => {
if(chat.chatKey == payload.chatKey) {
chat.messages = payload.messages
}
})
},
addMessage(state,message) {
state.chats.forEach(chat => {
if(chat.chatKey == message.channel) {
if(chat.messages.length < 15) {
chat.messages.push(message)
}
else {
chat.messages.shift()
chat.messages.push(message)
}
}
})
state.friends.forEach(friend => {
if(friend.chatKey == message.channel) {
friend.lastMessage = message.text
}
})
}
},
actions: {
}
})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment