Nice-Ming / Vue Chatroom
Vue全家桶 + socket.io + express 搭建的聊天室+ 智能问答助手
Stars: ✭ 27
Projects that are alternatives of or similar to Vue Chatroom
Vuesocial
something like QQ、weibo、weChat(vue+express+socket.io仿微博、微信的聊天社交平台)
Stars: ✭ 189 (+600%)
Mutual labels: express, vuex, socket-io, vue-router
Vue Qq
🎨 Vue family bucket with socket.io and express/koa2 , create a web version of mobile QQ, supporting real-time group chat, real-time private chat, special care, shielding chat, smart IP geographic location, real-time display temperature and other QQ core functions
Stars: ✭ 861 (+3088.89%)
Mutual labels: express, vuex, socket-io, vue-router
Vue 163 Music
【停止维护】网易云音乐web版,支持PC端常用功能,localStorage保存播放列表
Stars: ✭ 788 (+2818.52%)
Mutual labels: express, vuex, vue-router
Vue Studymaps
使用 Vue.js 开发的聚合应用。通过爬虫抓取平时浏览的网站,省去逐个点开网页的时间。
Stars: ✭ 71 (+162.96%)
Mutual labels: express, vuex, vue-router
Vue Chat
👥Vue全家桶+Socket.io+Express/Koa2打造一个智能聊天室。
Stars: ✭ 887 (+3185.19%)
Mutual labels: express, vuex, vue-router
Mmf Blog Vue2 Ssr
mmf-blog-vue2 ssr(The service side rendering)
Stars: ✭ 174 (+544.44%)
Mutual labels: express, vuex, vue-router
Vue2 Shop
A shop developed with Vue2 + Vue-router + Axios + Vuex + Node + Express + MongoDB + Webpack
Stars: ✭ 103 (+281.48%)
Mutual labels: express, vuex, vue-router
163music
🎵163 music web app built with Vue 2.6, server side render, webpack 4
Stars: ✭ 139 (+414.81%)
Mutual labels: express, vuex, vue-router
Vue Shoppingcart
ShoppingCart (Ecommerce) 🛒 Application using Vuejs, + Node.js + Express + MongoDB 🚀🤘
Stars: ✭ 141 (+422.22%)
Mutual labels: express, vuex, vue-router
Vue Chat
📲 A web chat application. Vue + node(koa2) + Mysql + socket.io
Stars: ✭ 617 (+2185.19%)
Mutual labels: vuex, socket-io, vue-router
Vue Music Player
🎵Vue.js写一个音乐播放器+📖One(一个).A music player + One by Vue.js
Stars: ✭ 729 (+2600%)
Mutual labels: vuex, vue-router
Hackernews
HackerNews clone built with Nuxt.js
Stars: ✭ 758 (+2707.41%)
Mutual labels: vuex, vue-router
Vuecnodejs
⚽️🎉Vue初/中级项目,CnodeJS社区重构。( a junior project of Vue.js, rewrite cnodejs.org ) 预览(DEMO):
Stars: ✭ 705 (+2511.11%)
Mutual labels: vuex, vue-router
Vue Meteor
🌠 Vue first-class integration in Meteor
Stars: ✭ 893 (+3207.41%)
Mutual labels: vuex, vue-router
nice-chat
用 Vue.js + socket.io 搭建的一个智能聊天室
这算是入坑 Vue 后的第二个练手项目了,是之前四月份就弄完了,一直没法发出来。今天突然想起来,还是发出来记录一下自己的学习历程。废话不多说,下面看东西。
链接
项目技术栈
- 前端:Vue.js+vue-router+vuex+Sass
- 异步请求:axios+promise
- 后端:express 代理请求 CORS 解决跨域
功能实现
IP 定位 智能机器人问答 群聊
群聊功能的服务端
build/webpack.dev.conf.js 里添加
// 搭建一个socket.io服务
const app = require('express')
const server = require('http').Server(app)
const io = require('socket.io')(server)
server.listen(8081)
let oSockets = []
io.sockets.on('connection', socket => {
console.log('用户链接成功')
oSockets.push(socket)
// 群聊
socket.on('sendMsg', data => {
socket.broadcast.emit('receiveMsg', data)
})
// 上线
socket.on('online', data => {
socket.broadcast.emit('online', data)
})
// 断开连接
socket.on('disconnect', () => {
oSockets.filter(item => item !== socket)
console.log('用户离线')
})
})
群聊功能的客户端
components/Chat.vue 里添加
import io from 'socket.io-client'
// 建立socket.io通信
const socket = io.connect('http://localhost:8081')
export default {
......
mounted() {
// 监听通信事件
socket.on('online', name => {
if (!name) {
return
}
this.onlineTip = `${name}加入群聊`
this.showTip()
})
socket.on('receiveMsg', data => {
this.messages.push(data)
})
// 发送上线事件
socket.emit('online', this.nickname)
}
......
}
智能问答功能
这里就不贴代码了 可以在进入我的GitHub里项目的 src/components/AI.vue 查看其实我这边也是后端代理请求了图灵机器人提供的免费接口,还是很不错的,注册一个账户就能使用他们的开放 api 了,不过会有个私有的 key 需要请求的时候作为参数传过去,因为每天限制请求 1k 次
其他
- vuex 虽说是为了中大型项目而生的,这个小项目使用就有点大材小用了,不过也算了解一下 vuex,这个模式还是很棒的,公共的状态放在一个 store 里统一管理,不用再为各个组件之间传值搞得头大
- socket.io 是一个 WebSocket 库,包括了客户端的 js 和服务器端的 nodejs,可以建立与服务器的双向通信,使用 emit()和 on()方法来发送和监听服务,也易于理解
- express 是 node 上的一个开发框架,通过封装 node 的二次封装,提供简洁的 api,实现路由和中间件的功能
- 最近在找实习工作 我的在线简历
Build Setup
# install dependencies
npm install
# serve with hot reload at localhost:8080
npm run dev
# build for production with minification
npm run build
# build for production and view the bundle analyzer report
npm run build --report
For a detailed explanation on how things work, check out the guide and docs for vue-loader.
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].