基于 typescript+vue+websocket 的实时聊天应用

这是一个基于 typescript+vue+websocket 的实时聊天应用,可以作为 typescrpt+vue 结合示例,也可以作为 express+websocket 入门参考

代码在这里

解说的分割线----------

定义模型

实时聊天应用中,前后端最关心的 model 无非两个:message 和 user.这里用 typescript 定义如下

• user

class User {
  private name: string
  private id: string
  private avatar: string
}
复制代码

• message

import User from './user'
class Message {
  private from: User;
  private content: string
  private type: string
}
复制代码

这里的 model 前后端可以复用.

前端部分

聊天应用中对 message 和 user 数据的操作比较频繁,所以把这部分相关的代码写在 vuex,再通过mapstate和mapmutation注入到 vue 实例中

@Component({
	computed: {
		...mapState(['ws', 'msgList', 'user']),
	},
	methods: {
		...mapMutations(['toggleLogin', 'initWS', 'addMsg', 'sendMsg']),
	},
})
复制代码

websocket 通信方面偷了个懒,如果有新消息直接推到通道内,再监听通道变化,渲染到本地

//推送到websocket
this.sendMsg({
  type: 'addMsg',
  from: user,
  content,
});
/渲染到本地
this.ws.onopen = (e: any) => {
  console.log('connection established');
  this.sendJoin();
};
this.ws.onmessage = (e: any) => {
  const msg = JSON.parse(e.data);
  this.$store.commit('addMsg', msg);
};
复制代码

实际聊天应用中是同时推送到本地和 websocket 通道,只不过对本地推送的消息加个 loading,等消息真正推送到对端把 loading 去掉(猜测......)

后端部分

后端代码相当简单,简单到不好意思说明... 核心代码就两句:

// Broadcast to all.
const broadcast = (data: message) => {
	wss.clients.forEach((client) => {
		if (client.readyState === WebSocket.OPEN) {
			client.send(data);
		}
	});
};

wss.on('connection', (ws) => {
	console.log('connection established');
  //监听消息,广播到所有客户端
	ws.on('message', (data: message) => {
		broadcast(data);
	});
});
复制代码

启动

• cd client && npm run serve
• cd server && npm run watch

---

这样一个简单的实时聊天应用就完成啦~~~~