vue+django实现一对一聊天功能的实例代码
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了vue+django实现一对一聊天功能的实例代码，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含4196字，纯文字阅读大概需要6分钟。
内容图文
vue+django实现一对一聊天和消息推送的功能。主要是通过websocket，由于Django不支持websocket，所以我使用了django-channels。考虑到存储量的问题，我并没有把聊天信息存入数据库，服务端的作用相当于一个中转站。我只讲述实现功能的结构性代码，具体的实现还请大家看源代码。
前端聊天界面
前端消息提醒界面
后端代码
效果展示
实现过程
后端
首先，我们需要先定义websocket的两条连接路径。ws/chat/xxx/（xxx指代聊天组）这条路径是当聊天双方都进入同一个聊天组以后，开始聊天的路径。push/xxx/（xxx指代用户名）这条是指当有一方不在聊天组，另一方的消息将通过这条路径推送给对方。ws/chat/xxx/只有双方都进入聊天组以后才开启，而push/xxx/是自用户登录以后，直至退出都开启的。
websocket_urlpatterns = [ url(r'^ws/chat/(?P<group_name>[^/]+)/$', consumers.ChatConsumer), url(r'^push/(?P<username>[0-9a-z]+)/$', consumers.PushConsumer), ]
我们采用user_a的id加上下划线_加上user_b的id的方式来命名聊天组名。其中id值从小到大放置，例如：195752_748418。当用户通过ws/chat/group_name/的方式向服务端请求连接时，后端会把这个聊天组的信息放入一个字典里。当连接关闭时，就把聊天组从字典里移除。
class ChatConsumer(AsyncJsonWebsocketConsumer): chats = dict() async def connect(self): self.group_name = self.scope['url_route']['kwargs']['group_name'] await self.channel_layer.group_add(self.group_name, self.channel_name) # 将用户添加至聊天组信息chats中 try: ChatConsumer.chats[self.group_name].add(self) except: ChatConsumer.chats[self.group_name] = set([self]) #print(ChatConsumer.chats) # 创建连接时调用 await self.accept() async def disconnect(self, close_code): # 连接关闭时调用 # 将关闭的连接从群组中移除 await self.channel_layer.group_discard(self.group_name, self.channel_name) # 将该客户端移除聊天组连接信息 ChatConsumer.chats[self.group_name].remove(self) await self.close()
接着，我们需要判断连接这个聊天组的用户个数。当有两个用户连接这个聊天组时，我们就直接向这个聊天组发送信息。当只有一个用户连接这个聊天组时，我们就通过push/xxx/把信息发给接收方。
async def receive_json(self, message, **kwargs):
# 收到信息时调用
to_user = message.get('to_user')
# 信息发送
length = len(ChatConsumer.chats[self.group_name])
if length == 2:
await self.channel_layer.group_send(
self.group_name,
{
"type": "chat.message",
"message": message.get('message'),
},
)
else:
await self.channel_layer.group_send(
to_user,
{
"type": "push.message",
"event": {'message': message.get('message'), 'group': self.group_name}
},
)
async def chat_message(self, event):
# Handles the "chat.message" event when it's sent to us.
await self.send_json({
"message": event["message"],
})
# 推送consumer
class PushConsumer(AsyncWebsocketConsumer):
async def connect(self):
self.group_name = self.scope['url_route']['kwargs']['username']
await self.channel_layer.group_add(
self.group_name,
self.channel_name
)
await self.accept()
async def disconnect(self, close_code):
await self.channel_layer.group_discard(
self.group_name,
self.channel_name
)
# print(PushConsumer.chats)
async def push_message(self, event):
print(event)
await self.send(text_data=json.dumps({
"event": event['event']
}))
前端
前端实现websocket就比较简单了。就是对websocket进行初始化，定义当websocket连接、关闭和接收消息时要执行哪些动作。
<script>
export default {
name : 'test',
data() {
return {
websock: null,
}
},
created() {
this.initWebSocket();
},
destroyed() {
this.websock.close() //离开路由之后断开websocket连接
},
methods: {
initWebSocket(){ //初始化weosocket
const wsuri = "ws://127.0.0.1:8080";
this.websock = new WebSocket(wsuri);
this.websock.onmessage = this.websocketonmessage;
this.websock.onopen = this.websocketonopen;
this.websock.onerror = this.websocketonerror;
this.websock.onclose = this.websocketclose;
},
websocketonopen(){ //连接建立之后执行send方法发送数据
let actions = {"test":"12345"};
this.websocketsend(JSON.stringify(actions));
},
websocketonerror(){//连接建立失败重连
this.initWebSocket();
},
websocketonmessage(e){ //数据接收
const redata = JSON.parse(e.data);
},
websocketsend(Data){//数据发送
this.websock.send(Data);
},
websocketclose(e){ //关闭
console.log('断开连接',e);
},
},
}
</script>
参考文章
Django Channels 实现点对点实时聊天和消息推送
Vue中使用websocket的正确使用方法
总结
以上所述是小编给大家介绍的vue+django实现一对一聊天功能的实例代码,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！
内容总结
以上是互联网集市为您收集整理的vue+django实现一对一聊天功能的实例代码全部内容，希望文章能够帮你解决vue+django实现一对一聊天功能的实例代码所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。