vue实现简单聊天窗口

构建:

  • 输入:input
  • 提交:button
  • 历史消息展示:ul

实现:

  • 数据展示到界面:data
  • 界面数据动态变化:操作data
  • 数据刷新: this.data = value
<div id="app">
        <ul>
            <li v-for="item in message_array">{{item}}</li>
        </ul>
        <input type="text" v-model="message"/>
        <button v-on:click="dealMessage">add</button>
</div>
new  Vue({
     el:"#app",
     data:{
         message_array:[],
         message:''
     },
     methods:{
         dealMessage: function () {
             this.message_array.push(this.message);
             this.message = '';
         }
     }
 })

 

  • 6
    点赞
  • 18
    收藏
    觉得还不错? 一键收藏
  • 164
    评论
这里提供一个简单的示例,使用Spring Boot作为后端和Vue.js作为前端来实现在线聊天。 1. 创建Spring Boot项目 首先,我们需要创建一个Spring Boot项目。在这里,我们使用Spring Initializr创建一个Maven项目。在dependencies中添加Web和WebSocket依赖。 2. 添加WebSocket配置类 在/src/main/java/目录下创建一个config包,并创建一个WebSocketConfig类。在这个类中,我们配置了一个WebSocketHandler,用于处理WebSocket请求。 ```java @Configuration @EnableWebSocket public class WebSocketConfig implements WebSocketConfigurer { @Override public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) { registry.addHandler(new ChatWebSocketHandler(), "/chat").setAllowedOrigins("*"); } private class ChatWebSocketHandler extends TextWebSocketHandler { private final List<WebSocketSession> sessions = new CopyOnWriteArrayList<>(); @Override public void afterConnectionEstablished(WebSocketSession session) throws Exception { sessions.add(session); } @Override public void afterConnectionClosed(WebSocketSession session, CloseStatus status) throws Exception { sessions.remove(session); } @Override protected void handleTextMessage(WebSocketSession session, TextMessage message) throws Exception { for (WebSocketSession s : sessions) { if (s.isOpen()) { s.sendMessage(message); } } } } } ``` 3. 创建一个ChatController类 在/src/main/java/目录下创建一个controller包,并创建一个ChatController类。在这个类中,我们处理聊天页面的请求。 ```java @RestController @RequestMapping("/chat") public class ChatController { @GetMapping public ModelAndView chat() { return new ModelAndView("chat"); } } ``` 4. 创建一个ChatMessage类 在/src/main/java/目录下创建一个model包,并创建一个ChatMessage类。这个类用于表示聊天消息。 ```java public class ChatMessage { private String sender; private String content; public ChatMessage() { } public ChatMessage(String sender, String content) { this.sender = sender; this.content = content; } // getter and setter } ``` 5. 创建一个Vue.js聊天页面 在/src/main/resources/static/目录下创建一个chat.html文件。在这个文件中,我们引入Vue.js和Sock.js,并创建一个Vue实例。 ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Chat</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script src="https://cdn.jsdelivr.net/npm/sockjs-client@1.4.0/dist/sockjs.min.js"></script> </head> <body> <div id="app"> <div v-for="message in messages"> {{ message.sender }}: {{ message.content }} </div> <input v-model="content" @keyup.enter="send"> </div> <script> new Vue({ el: '#app', data: { messages: [], content: '' }, created: function () { var socket = new SockJS('/chat'); var self = this; socket.onmessage = function (event) { var message = JSON.parse(event.data); self.messages.push(message); }; }, methods: { send: function () { var message = { sender: 'user', content: this.content }; this.messages.push(message); var socket = new SockJS('/chat'); socket.send(JSON.stringify(message)); this.content = ''; } } }); </script> </body> </html> ``` 6. 运行应用程序 现在,我们可以运行应用程序,并访问http://localhost:8080/chat,看到一个简单聊天页面。在多个浏览器窗口中打开该页面,并开始聊天。 代码示例:https://github.com/zhangchaoxu/spring-boot-vue-chat

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 164
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值