首页 WebSocket聊天室源码分享以及搭建讲解

WebSocket聊天室源码分享以及搭建讲解

前面已经在 WebSocket聊天室 简单的讲解了一些源码以及一个简单的版本,但是那毕竟不是我网站上所显示的样子,所以这次应一网友需要源码,所以特意抽时间把源码全部放出来,并写下此教程。这个源码也就是 http://www.zhanghuanglong.com/im/chat/ 几乎一样的 源码在底部


问题

在讲诉步骤之前,先说说有的网友在聊天室里有几个问题,

  • 在IE(Edge也会)下有时候会自动断开连接
    • 其实这个问题呢,因为长时间没有说话或者聊天会自动断开,所以可以在onclose以及onerror事件中写入重新连接的代码,同时也在onopen事件中使用setInterval一直往服务端发送消息(也叫心跳) 如下图

image.png


准备工作

  1. 安装Nodejs,因为聊天基于nodejs运行的  安装就是下一步下一步就可以
  2. 安装mongodb,因为聊天记录是存储在mongodb中的,安装教程 在windows下安装mongodb
  3. 修改 mongo.js文件中 var url = "mongodb://10.0.0.1:27017/Resources"; 修改ip和port为你的mongo的ip和port
  4. 修改 chatinfo.js文件 中 im.zhanghuanglong.com:1202 修改为 127.0.0.1:1202 这是启动之后连接本地
  5. 安装组件 在app.js目录下cmd输入npm install回车即可 可能因网速原因有的很慢 由于组件就8M不大我就一起放在源码中了,否则有人慢的一个小时都不一定安装完

开始运行

  • 直接双击index.html好像有点小问题,所以需要搭建站点,使用HBuilder,使用IIS,使用VS内置的Express都可以运行站点
  • 然后进入app.js目录cmd输入 node app.js 回车即可,如果需要修改端口,自己打开app.js找到1202修改即可
> node app.js
IP库初始化..
IP库初始化成功!
listening on 1202
  • 打开站点 例如我的192.168.1.196:8088 就可以聊天了。

其他

由于机器人回复这块是C#写的,调用的一个叫websocket-sharp组件写的 回复是由图灵机器人自动回复的,所以就没放上来了

可能有时候运行会看见头像没有出来,那是因为我随机昵称和随机logo是由C#写的在另一个项目里,所以你会看到昵称都是固定的两个字和随机数字,(为什么会在C#里?因为我一开始写的聊天是是原生WebSocket写的,但是各种问题,所以后来直接使用现有的socket.io了) 如果需要修改昵称这部分,可以去Scripts/IM/userinfo.js 自己修改顶上那部分代码即可,

可能有人会吐槽socketio.js的封装,确实可能会的,因为那部分可以优化一下,后来都不愿意改了stuck_out_tongue_winking_eyestuck_out_tongue_winking_eyestuck_out_tongue_winking_eye

我自己测试有一个bug,是当在公聊说话,然后切换到私聊(点击左人即可)说话,此时再切换到公聊会发现公聊刚刚发出去的消息不见了,所以这个需要自己修改一下,估计哪里获取有问题

扩展

  • 我只是写着玩,如果需要拿去扩展或者其他的话,比如说需要登陆。
  • 前面说有个网友是拿来当作客服的,但是客服肯定不需要你说一句所有客户都可能看见,所以可以修改app.js文件中回复消息不采用广播那块即可 加上 WebSocket聊天室 两篇文章一起看可能有所得

源码 : https://git.kerwin.cn/Shares/WebSocketChat

除另有声明外,本文章WebSocket聊天室源码分享以及搭建讲解采用 知识共享(Creative Commons) 署名-非商业性使用-相同方式共享 3.0 中国大陆许可协议 进行许可。

评论
目录