前端实现

目录结构

登录(LoginView.vue)

<template><div class="login"><input type="text" placeholder="请输入用户名" v-model="userName"><br><input type="password" placeholder="请输入密码" v-model="passWord"><br><button @click="handleEntryClick">登录</button></div>
</template>
<script>
import {ref, onMounted} from 'vue'
import {useRouter} from 'vue-router'
export default {name: 'Login',setup () {const userName = ref('')const passWord = ref('')const router = useRouter()onMounted(() => {console.log(localStorage.getItem('userName'))if (!localStorage.getItem('userName')) {router.push('/')return}})const handleEntryClick = () => {const _passWord = passWord.value.trim()console.log('userName', userName)console.log('passWord', passWord)if (_passWord.length < 6) {alert('密码不能小于6位')return}localStorage.setItem('userName', userName.value)userName.value = ''passWord.value = ''router.push('/home')}return {userName,passWord,handleEntryClick}}
}
</script>

聊天室（HomeView.vue）

<template><div><div><ul><li v-for="(item, index) in msgList" :key="index"><p><span>用户：{{item.user}}</span><span>{{new Date(item.dateTime)}}</span></p><p>消息：{{item.msg}}</p></li></ul></div><hr><input type="text" placeholder="请输入消息" v-model="msg"><button @click="handleSendMsg">发送</button></div>
</template><script>
import {reactive, onMounted, toRefs} from 'vue'
import {useRouter} from 'vue-router'
import useWebSocket from '@/hooks'
export default {name: 'HomeView',components: {},setup() {const state = reactive({msg: '',msgList: []})let userName = localStorage.getItem('userName')const router = useRouter()const ws = useWebSocket(handleMessage)onMounted (() => {if (!userName) {router.push('/')}})const handleSendMsg = () => {if (!state.msg.trim().length) {return}ws.send(JSON.stringify({user: userName,msg: state.msg,dateTime: new Date().getDate()}))}function handleMessage ({data}) {console.log('data',JSON.parse(data))const msg = JSON.parse(data)state.msgList.push(msg)}return {...toRefs(state),handleSendMsg}}
}
</script>

webscoket封装

import WS_BASE_URL from '../configs'
function useWebSocket (handleMessage) {const ws = new WebSocket(WS_BASE_URL)const init = () => {bindEvent()}function bindEvent () {console.log('绑定事件')ws.addEventListener('close', handleClose, false)ws.addEventListener('open', handleOpen, false)ws.addEventListener('error', handleError, false)ws.addEventListener('message', handleMessage, false)}function handleOpen (e) {console.log('handleOpen', e)}function handleClose (e) {console.log('handleClose', e)}function handleError(e) {console.log('handleError', e)}init()return ws
}
export default useWebSocket

效果实现

WebSocket——vue3简易聊天室相关推荐

基于Node.js + WebSocket 的简易聊天室
代码地址如下: http://www.demodashi.com/demo/13282.html Node.js聊天室运行说明 Node.js的本质就是运行在服务端的JavaScript.Node.j ...
原创回归前端学习第21天-实现俄罗斯方块小游戏3（深入了解Websocket~优化简易聊天室）
对昨天的简易聊天室进行优化增加一个mes对象,将传送的数据放在对象里增加一个mes对象,将传送的数据放在对象里 wsServer.js中替换代码 broadcast(conn.nickname + ...
Vue3 -- 基于Websocket实现简易聊天室
文章目录标题代码地址表情包资源 chat.data.ts index.vue 标题接上一篇博文这里使用 Vue3 + Typescript + Websocket 实现在线聊天功能的前端部分 ...
nodejs websocket 实现简易聊天室功能
文章目录 1. 服务端 app.js 代码 2. 客户端 app.html 代码 3. 样式代码 app.css 4. nodemon 辅助开发首先说明,以下代码都是基于 Nodejs+webSoc ...
webSocket——Vue2简易聊天室
WebSocket原生实现 WebSocket-Vue2 WebSocket-Vue3 Vue2版本实现前端实现目录结构 login.vue 登录 <template><div& ...
websocket实现简易聊天室
websocket支持全双工通信,也就是客户端和服务端双向通信.以前都是通过http轮询的方式实现实时的,这非常耗性能.Websocket不仅能节省资源和带宽,还能实现长链接的作用前端通过创建Web ...
Java WebSocket实现简易聊天室
一.Socket简介 Socket又称"套接字",应用程序通常通过"套接字"向网络发出请求或者应答网络请求.Socket的英文原义是"孔"或 ...
前端websocket实现简易聊天室
分为客户端和服务端,客户端就是一个简单的html页面,服务端使用node进行编写.具体代码如下 index.html <!DOCTYPE html> <html> <he ...
SpringBoot整合WebSocket实现简易聊天室
文章目录什么是WebSocket ? WebSocket通信模型为什么需要WebSocket Websocket与http的关系 SpringBoot集成WebSocket 什么是WebSocke ...

WebSocket——vue3简易聊天室

WebSocket原生实现

WebSocket-Vue2

WebSocket-Vue3

前端实现

目录结构

登录(LoginView.vue)

聊天室（HomeView.vue）

webscoket封装

效果实现

WebSocket——vue3简易聊天室相关推荐

最新文章

热门文章