咱这儿现在的人，都一刻也离不开聊天App了，跟吃饭喝水一样正常。只要搭上了这挂，工作或平常沟通都会变得很顺手！说到Web开发的前沿技术，大家最中意的应该就是Vue.js了？理由，当然就是操作方便实用今儿个咱们就来讲讲如何用Vue来做个实时聊天功能，让你的软件也时髦起来。
即时通讯的基本要求
咱得先学会怎么用即时通聊呗。比如，咱们正想搞一个直截了当的聊天软件，这样就能互相传消息。说实话咱就需要干好以下这些事儿：
1. 用户可以输入消息并发送给其他用户。
2. 接收到的消息将实时显示在聊天界面上。
3. 用户可以查看在线用户列表，并选择与之聊天。
创建ChatInput组件
要解决这个问题，首先我们得弄清楚两个关键元素：ChatInput和ChatMessage。ChatInput就是捕捉你说的话并把它们传输到服务器的那玩意儿。整个儿就像个简单的文本框加个按钮。那么咱们现在就瞅瞅ChatInput究竟咋回事儿吧：
javascript
这货就是个贴心小助理，能告诉你新消息，当你按下去的时候，就开始用’sendMessage’大显身手，把信息告诉主体程序后还顺便清除输入框里的内容。
创建ChatMessage组件
咱们得整出个新玩意儿，就叫ChatMessage组件，它的任务就是把大家传来传去的信息展示出来。这个小助手能把收到的消息当宝贝藏起来，再乖乖地在屏幕上显示出来。来讲讲怎么用ChatMessage组件吧：
{{ message }}
export default { data() { return { message: "" }; }, methods: { sendMessage() { // 发送消息给服务器的逻辑 // 在这里调用服务器提供的发送消息的API } } };
props: {
message: String
这玩意儿就是炫耀新收信息用滴。你刚发完消息，它马上就能发现，紧接着就会把聊天记录给亮出来！
使用Vuex管理消息状态
想要所有人都了解你发出去的信息？那就要借助Vuex这个绝佳的全局状态管理器。只需要设立一个名为messages的数组，放在Vuex store里头，问题马上解决！接下来我就简单给你说下怎么具体运行这一步：
import Vue from ‘vue’;
export default { props: { message: { type: Object, required: true } } };{{ message }}
import Vuex from ‘vuex’;
Vue.use(Vuex);
这个就是我们的Vuex.Store，它会变成这样:
就这样，我们直接创建了一个新的Vuex存储对象。
state: {
messages: []
mutations: {
addMessage(state, message) {
// store.js
import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);
export default new Vuex.Store({
state: {
messages: []
},
mutations: {
addMessage(state, message) {
state.messages.push(message);
}
},
actions: {
receiveMessage({ commit }, message) {
// 接收到消息后调用该方法，将消息存储到状态管理器中
commit("addMessage", message);
}
}
});
state.messages.push(message);
actions: {
给我们来点事儿（传消息）！你需要输入一个叫{commit}的参数和一条消息content（也就是你想说的话）。搞定之后，你就可以随心所欲地使用这个方法~
就这么简单，说干就干！咱们加个消息进去。
});
我们在这儿设置了个叫 `messages` 的表格用来存放大家的聊天内容，用 `addMessage` 就能加入新消息。还有就是别忘了 `sendMessage` 可以触发这个效果
import ChatMessage from "./ChatMessage.vue"; import ChatInput from "./ChatInput.vue"; export default { components: { ChatMessage, ChatInput }, data() { return { messages: [] }; }, methods: { sendMessage(message) { // 发送消息的逻辑 // 在这里调用服务器提供的发送消息的API }, receiveMessage(message) { // 接收到消息的逻辑 // 将消息存储到状态管理器中 this.$store.dispatch("receiveMessage", message); } }, created() { // 在组件创建时连接到服务器 // 监听服务器发送过来的消息 // 调用receiveMessage方法处理接收到的消息 } };聊天
在聊天界面中使用组件
其实关键就是要利用这些东西搞定聊天界面，处理服务器传来的信息！这里给大家演示个简易的小例子看看吧：
看看我们的聊天输入框组件，它叫ChatInput。
啊快来关注咱们的聊天对话工具，就在’redactor/ChatMessage.vue’里面。
咱们来用下Vuex的mapState功能。
components: {
ChatInput,
ChatMessage
computed: {
…mapState([‘messages’])
sendMessage(message) {
直接发个信息就行了，就写’sendMessage’, message)这句话搞定！
你看这里，我们用到的就是”ChatInput”和“ChatMessage”这俩小东西，再加上个“mapState”从Vuex存储空间提取聊天信息。你想说话的话，就按一下那个“sendMessage”按钮，你说的话就能直接跑到Vuex存储空间里了！
处理服务器发送的消息
搞定即时聊天，就得处理好服务器传来的消息。其实，你可以试试WebSocket或者差不多的东西。这不，我这儿正好有个简短有趣的WebSocket代码例子，你瞧瞧吧：
咱们先通过新WebSocket连上ws://example.com/ws！
在聊 天窗口收到消息就处理。
不用管那个事件数据，直接给我解析成JSON。
记住给’ addMessage ‘这个文档加消息。
咱们弄出一套网页版的WebSocket连接服务器功能，然后收到新消息后直接存到Vuex内存中。这样，只要有啥新鲜事，咱们的聊天框儿立马就能告诉大家！
总结与展望
搞定了这些，你就能用Vue.js搞出一个简陋版微信了。这个是初级样例，所以别忘了保密(比如加密)和核实真实性(或者叫身份验证)。不过，有了Vue.js和其他工具，做个能用的即时通讯App就简单多了。希望这篇文章对想学Vue.js做即时通讯的小伙伴有所帮助。那大家在开发过程中都遇到了哪些难题？快来评论区聊聊，分享下你们的经验和看法，记得点赞并转发给更多人！
评论0