springboot+websocket+vue+vuex实现在线聊天（客户端）

最新推荐文章于 2024-07-24 17:40:22 发布

Java小许

最新推荐文章于 2024-07-24 17:40:22 发布

阅读量6.2k

点赞数 30

文章标签： websocket vue.js spring boot

本文链接：https://blog.csdn.net/qq_36715887/article/details/120120280

版权

一、使用node代理ws请求

proxyObj['/ws'] = {
    ws: true,
    target: "ws://localhost:8081"
}

导入连接需要连接websocket的js

npm install sockjs-client
npm install stompjs
npm install sass-loader@8.0.2 --save //这个是css写法需要用到的 不加版本会报错
npm install node-sass@4.14.1 --save //安装sass-loader 需要有node-sass

二、创建聊天窗口

可以使用一个按钮来跳转到聊天页面

          <el-button type="text" icon="el-icon-message-solid" style="color: black;margin-right: 5px" @click="goChat" ></el-button>

goChat(){
      this.$router.push('/chat');
    }

三、聊天页面绘制（引入第三方的样式）主页面

<template>
  <div id="app">
    <div class="sidebar">
      <card></card>
      <list></list>
    </div>
    <div class="main">
      <message></message>
      <usertext></usertext>
    </div>
  </div>
</template>

<script>
import card from "@/components/chat/card";
import list from "@/components/chat/list";
import message from "@/components/chat/message";
import usertext from "@/components/chat/usertext";

export default {
  name: 'Chat',
  data () {
    return {

    }
  },
  mounted:function() {
    this.$store.dispatch('initData');
  },
  components:{
    card,
    list,
    message,
    usertext
  }
}
</script>

<style lang="scss" scoped>
#app {
  margin: 20px auto;
  width: 800px;
  height: 600px;
  overflow: hidden;
  border-radius: 10px;
  .sidebar, .main {
    height: 100%;
  }
  .sidebar {
    float: left;
    color: #f4f4f4;
    background-color: #2e3238;
    width: 200px;
  }
  .main {
    position: relative;
    overflow: hidden;
    background-color: #eee;
  }
}
</style>

分模块页面聊天框自己头像

<template>
  <div id="card">
  	<header>
  		<img class="avatar" :src="user.userface" :alt="user.name">
  		<p class="name">{
  {user.name}}</p>
  	</header>
  	<footer>
  		<input class="search" type="text" v-model="$store.state.filterKey" placeholder="search user...">
  	</footer>
  </