最近练手开发了一个项目,是一个聊天室应用.项目虽不大,但是使用到了react, react-router, redux, socket.io,后端开发使用了koa,算是一个比较综合性的案例,很多概念和技巧在开发的过程中都有所涉及,非常有必要再来巩固一下. 项目目前部署在heroku平台上,在线演示地址: online demo, 因为是国外的平台速度可能有点慢,点进去耐心等一会儿就能加载好了. 加载好之后,首先出现的页面是让用户起一个昵称: 输入昵称之后,就会进入聊天页面,左边是进入聊天室的在线…
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>1</title> <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">…
代码地址如下:http://www.demodashi.com/demo/11579.html 界面展示: 首先展示demo的结果界面,只是简单消息的发送和接收,包括发送文字和发送图片. ws说明: 在介绍socket.io之前,先简单介绍一下websocket: Web Socket的目标是在一个单独的持久连接上提供全双工,双向通信 在JavaScript中建立了Web Socket之后,会有一个HTTP请求发送到浏览器以发送连接.取得服务器响应之后,建立的连接会使用HTTP升级从HTTP协议…
这段时间进了一个新的项目组,项目是用Appcan来做一个跨平台的移动运维系统,其中前台和后台之间本来是打算用WebSocket来实现的,但写好了示例后发现android不支持WebSocket,大为受挫.后在园子里看到用socket.io可以代替WebSocket,然而对于我这样JS都没学全的来说有多了一块要啃的砖头了,没奈何还是要硬着头皮上.下面是我用node.js和socket.io做的一个简易的Web聊天室,不过只支持局域网.由于也是刚学这些所以做的不好就请见谅了. 以下是服务端代码ind…
socket.io简单介绍 在Html5中存在着这种一个新特性.引入了websocket,关于websocket的内部实现原理能够看这篇文章.这篇文章讲述了websocket无到有,依据协议,分析数据帧的头,进行构建websocket.尽管代码短.但能够非常好地体现websocket的原理. http://blog.csdn.net/newpidian/article/details/50850670 ,这个特性提供了浏览器端和server端的基于TCP连接的双向通道. 可是并非全部的浏览器都支…
利用socket.io来构建一个聊天室,输入自己的id和消息,所有的访问用户都可以看到,类似于群聊. socket.io 这里只用来做一个简单的聊天室,官网也有例子,很容易就做出来了.其实主要用的东西就是事件监听和触发,on和emit.当socket.io连接成功之后,后台就可以跟浏览器互相通信了. let io = socket(app); io.on('connection', socket => { socket.on('reseive', data => { io.emit('news…
基于 nodejs 的 webSockt (socket.io) 理解 本文的业务基础是在基于 nodejs 的 socket.io 的直播间聊天室(IM)应用来的. 项目中具体的 框架如下 express + mongodb + socket.io 在介绍 socket.io 之前,我们有必要对 webSocket 进行根本的原理的理解. 一.webSocket 的前生今世 1.什么是 webSocket? 2.如何去用? 3.经常使用的场景? 4.需要注意的地方 好了,下面我们就按照上面 提…
内容摘要 1.程序架构 2.通信协议 3.服务器源代码 4.客户端源代码 5.运行效果 一.程序架构 在开发一个聊天室程序时,我们可以使用Socket.Remoting.WCF这些具有双向通信的协议或框架.而现在,我正要实现一个C#语言作为服务器 端.Android作为客户端的聊天室.由于服务器端和客户端不是同一语言(C#和java),所有我选择了Socket作为通信协议. 图1.1所示,我们可以看出:android手机客户端A向服务器端发送消息,服务器端收到消息后,又把消息推送到android…
所有文章搬运自我的个人主页:sheilasun.me 不得不说,上手AngularJS比我想象得难多了,把官网提供的PhoneCat例子看完,又跑到慕课网把大漠穷秋的AngularJS实战系列看了一遍,对于基本的使用依然有很多说不清道不明的疑惑,于是决定通过做一个在线聊天室帮助理解.DEMO可以戳→chat room,代码可以戳→ChatRoom-AngularJS. 清晰图可以戳 http://sheilasun.sinaapp.com/public/images/chatroom.gif 功…
使用socket.io client 开发时兼容IE低版本的办法 socket.io提供了针对各个版本浏览器的‘socket’功能的封转:websocket,长连接,流,flash什么的.给你格式化下代码: if (/Firefox\/\s/.test(navigator.userAgent)){ var socket = io.connect('127.0.0.1:8000',{transports:['xhr-polling']}); } else if (/MSIE (\d+.\d+);/…