WebSocket是什么?
实现过程 (vue技术实现)
静态:创建两个页面
登录页面
<template>
<div class="home">
<p><span>昵称:</span><input v-model="data" type="text"></p>
<p><span>头像:</span><input v-model="head" type="text"></p>
<p><button @click="handleLogin">登录</button></p>
</div>
</template>
<script>
export default {
data(){
return {
data:"",
head:""
}
},
methods:{
//点击登录按钮跳转到聊天室
handleLogin(){
this.$router.push({
path:"/about",
query:{
data:this.data,
head:this.head
}
})
}
}
}
</script>
聊天室页面
实现思路:
1、在created中获取登录页面传过来的数据,在data中定义并赋值。
2、在methods中定义一个函数来连接socket
3、在函数中创建一个WebSocket实例对象,并传入服务器地址
4、通过socket.onopen连接
5、连接成功后利用socket.send发送请求,将定义的用户信息数据发给服务器,注意:发送的消息内容需要用JSON.stringify转化为字符串。
6、再通过socket.onmessage去接收服务器返回的消息,将消息再通过JSON.parse处理后,根据类型来判断如何渲染
<template>
<div class="chat-wrap">
<div>在线人数:{{num}}</div>
<div class="item-wrap" v-for="(item,index) in chatList" :key="index" >
<img class="chat-img" :src="item.head" alt="" >
<div class="item-desc">
<span class="chat-name">{{item.userName}}</span>
<p class="chat-msg">{{item.data}}</p>
</div>
</div>
<div class="chat-send">
<input type="text" v-model="msg">
<button @click="sendMsg">发送</button>
</div>
</div>
</template>
<script>
export default {
data(){
return{
userInfo:{
type:"name",
data:"",
head:""
},
socket:null,
msg:"",
num:"",
chatList:[],
}
},
created(){
//获取登录页面传过来的数据
let {data,head}=this.$route.query;
this.userInfo.data = data;
this.userInfo.head =head;
this.creatSocket();
},
methods:{
//连接socket
creatSocket(){
// 创建WebSocket实例对象
this.socket = new WebSocket('ws://129.211.169.131:10009/globalchat');
//连接成功的回调
this.socket.onopen = () =>{
console.log("连接成功");
//连接成功后发送请求,需要用JSON.stringify转化为字符串
this.socket.send(JSON.stringify(this.userInfo))
};
//连接错误
this.socket.onerror = ()=>{
console.log("连接错误");
};
//接收消息的回调
this.socket.onmessage = this.serverToMine;
},
serverToMine(res){
console.log(res);
let data = JSON.parse(res.data);
//判断type类型来进行渲染
if(data.type == "message"){
//将所有的消息存放到chatList数组中
this.chatList.push({
head:data.head,
userName:data.userName,
data:data.data
});
}else if(data.type == "count"){
this.num = data.data
}
console.log("服务器发给我",res);
},
sendMsg(){
let sendID = {
type:"message",
data:this.msg,
};
this.socket.send(JSON.stringify(sendID))
}
}
}
</script>
<style lang="less" scoped>
.chat-wrap{
padding: 20px;
background-color: #eee;
height: 100%;
.item-wrap{
display: flex;
.chat-img{
width: 50px;
height: 50px;
border-radius: 50%;
margin-right: 10px;
}
.item-desc{
display: flex;
flex-direction: column;
.chat-msg{
background-color: white;
border-radius: 20px;
padding: 10px 15px;
}
}
}
.chat-send{
background-color: #eee;
padding: 10px 0;
position: fixed;
bottom: 0;
left: 0;
right: 0;
}
}
</style>