我自己在用socket.io开发,对官方网站上的文档,进行简单的整理,然后自己写了一个简单的聊天程序。最最开始

先安装socket.io:

npm install socket.io

利用Node的搭建Http服务

分为两个文件,服务端文件app.js和客户端index.html

app.js
var app = require('http').createServer(handler)
io = require('socket.io').listen(app)
fs = require('fs')
app.listen(80)
function handler (req, res) {
fs.readFile(__dirname + '/index.html',function (err, data) {
if (err) {res.writeHead(500);
return res.end('Error loading index.html');
}
res.writeHead(200);
res.end(data);
});
}
io.sockets.on('connection', function (socket) {
socket.emit('news', { hello: 'world' });
socket.on('my other event', function (data) {
console.log(data);}); });

这里需要注意的是: require(‘socket.io’).listen(app) 实际上这句就是讲socket的监听加入的app设置的http模块了 io.sockets.on('connection’,function()…)这里设置了在连接后进行的处理,代码示例中,主要包含两件事,一个是向前段发送news的事件,一个是监听my other event事件。

index.html
<script src="/socket.io/socket.io.js"></script>
<script>
var socket = io.connect('http://localhost');
socket.on('news', function (data) {
console.log(data);
socket.emit('my other event', { my: 'data' });
});
</script>

客户端一个引用了socket.io.js的javscript库还有就是连接服务器(通过io.connect(‘http://localhost’)) 之后在监听收到news的事件后,发送my other event事件

利用Express3框架上面的例子只是使用nodejs建立了一个交互,也可以使用express2的web框架, 具体app.js代码如下:

var app = require('express')()
server = require('http').createServer(app)
io = require('socket.io').listen(server); server.listen(80); app.get('/', function (req, res) {
res.sendfile(__dirname + '/index.html');}); io.sockets.on('connection', function (socket) {
socket.emit('news', { hello: 'world' });
socket.on('my other event', function (data) {
console.log(data);
});});

接收发送事件 socket.io允许用户自定义发送接收的事件。除了connect,message,disconnect三个事件外,用户可以自定义自己的事件

// note, io.listen(<port>) will create a http server for youvar io = require('socket.io').listen(80);

io.sockets.on('connection', function (socket) {
io.sockets.emit('this', { will: 'be received by everyone'}); socket.on('private message', function (from, msg) {
console.log('I received a private message by ', from, ' saying ', msg);
}); socket.on('disconnect', function () {
io.sockets.emit('user disconnected');
});});

存储数据有的时候需要存储一些和客户端关联的数据在会话里,socket.io也是支持的,代码如下:

var io = require('socket.io').listen(80);

io.sockets.on('connection', function (socket) {
socket.on('set nickname', function (name) {
socket.set('nickname', name, function () {
socket.emit('ready');
});
}); socket.on('msg', function () {
socket.get('nickname', function (err, name) {
console.log('Chat message by ', name);
});
});});

socket.set和socket.get方法分为用于设置和获取变量。

设置命名空间有的时候要一个程序支持多个应用,如果使用默认的 “/” 命名空间可能会比较混乱。如果想让一个连接可以支持多个连接,可以使用如下的命名空间的方法:

app.js
var io = require('socket.io').listen(80);var chat = io
.of('/chat')
.on('connection', function (socket) {
socket.emit('a message', {
that: 'only'
, '/chat': 'will get'
});
chat.emit('a message', {
everyone: 'in'
, '/chat': 'will get'
});
});

var news = io .of(‘/news’) .on('connection’, function (socket) { socket.emit('item’, { news: ‘item’ }); });

client.js
<script>
var chat = io.connect('http://localhost/chat')
, news = io.connect('http://localhost/news'); chat.on('connect', function () {
chat.emit('hi!');
}); news.on('news', function () {
news.emit('woot');
});</script>

发送获取数据有的时候,你需要在发送数据后,等待服务器的消息确认。当然简单的发,可以通过两次消息发送,来完成。这里介绍一种使用回调函数的方法:

app.js
var io = require('socket.io').listen(80); io.sockets.on('connection', function (socket) {
socket.on('ferret', function (name, fn) {
fn('woot');
});});
client.html
<script>
var socket = io.connect(); // TIP: .connect with no args does auto-discovery
socket.on('connect', function () { // TIP: you can avoid listening on `connect` and listen on events directly too!
socket.emit('ferret', 'tobi', function (data) {
console.log(data); // data will be 'woot'
});
});</script>

广播向所有的连接触发事件,这里注意:不包括本身连接的事件。

var io = require('socket.io').listen(80);

io.sockets.on('connection', function (socket) {
socket.broadcast.emit('user connected');});

我写的聊天程序:

index.html

<script src="/socket.io/socket.io.js"></script><script>
var socket = io.connect('http://localhost'); socket.on("notice", function(data){
var msg = document.getElementById('all').value;
document.getElementById('all').innerText = msg + "\n" + data.message;
}); var chat_fn = function(){
var msg = document.getElementById("message").value;
socket.emit("chat", {message: msg});
}; socket.on("nickname ready", function(data){
alert("nickname changed.");
}); var change_nickname = function(){
var nickname = document.getElementById("nickname").value;
socket.emit('set nickname', nickname);
};</script><textarea id="all" cols=40 rows=20></textarea><br /><label>Message:</label><input id="message" type="text" name="message" cols=120/><input id="chat_btn" type="button" value="chat" onclick="javascript:chat_fn()" /><label>NickName:</label><input id="nickname" typee="text" name="nickname" /><input id="chang_name" type="button" value="nickname" onclick="javascript:change_nickname()" />
app.js var app = require('http').createServer(handler)
, io = require('socket.io').listen(app)
, fs = require('fs'); app.listen(80);function handler (req, res) {
fs.readFile(__dirname + '/index.html',
function (err, data) {
if (err) {
res.writeHead(500);
return res.end('Error loading index.html');
} res.writeHead(200);
res.end(data);
});} io.sockets.on('connection', function (socket) {
// socket.emit('news', { hello: 'world' });
// socket.on('my other event', function (data) {
// console.log(data);
// }); socket.set('nickname', 'nickname', function(){
}); socket.on('set nickname', function(name){
socket.set('nickname', name, function(){
console.log("change nickname=>" + name);
socket.emit('nickname ready');
});
}); socket.on('chat', function(data){
socket.get('nickname', function(err, name){ socket.emit("notice", {message: name + ":" + data.message});
socket.broadcast.emit("notice", {message: name + ":" + data.message});
console.log("chat: " + data.message);
});
});});

socket.io实现在线群聊的更多相关文章

  1. 使用socket.io开发简单群聊功能

    1.新建package.json文件: { "name": "socket-chat-example", "version": " ...

  2. 关于Socket.IO的知识点记录

    最近因为项目的需要,开始学习nodejs,本着js的那点儿功底,nodejs学习起来还是挺快能上手的.随着深入学习,知道了express框架并那它写了一个小功能,作为一个php程序员哈,在expres ...

  3. 基于koa模块和socket.io模块搭建的node服务器实现通过jwt 验证来渲染列表、私聊、群聊功能

    1. 具体代码在需要的下载 https://gitee.com/zyqwasd/socket 效果: 2. package.json文件 1. 下载基本的模块  修改了start 脚本  nodemo ...

  4. Node.js下基于Express + Socket.io 搭建一个基本的在线聊天室

    一.聊天室简单介绍 采用nodeJS设计,基于express框架,使用WebSocket编程之 socket.io机制.聊天室增加了 注册登录模块 ,并将用户个人信息和聊天记录存入数据库. 数据库采用 ...

  5. 【socket.io研究】3.手机网页间聊天核心问题

    前面我们已经说了服务器相关的一些内容,且又根据官网给出的一个例子写了一个可以聊天的小程序,但是这还远远不够呀,这只能算是应用前的准备工作.接下来,一起来考虑完善一个小的聊天程序吧. 首先,修改服务器的 ...

  6. nodejs+socket.io即时聊天实例

    在这之前你应该先安装好 Node.js,安装过程不再讲解 首先在你的电脑上创建一个新目录,姑且命名为 chat,然后在该目录创建两个文件,分别是 app.js 和 index.html. app.js ...

  7. 基于Express+Socket.io+MongoDB的即时聊天系统的设计与实现

    记得从高中上课时经常偷偷的和同学们使用qq进行聊天,那时候经常需要进行下载qq,但是当时又没有那么多的流量进行下载,这就是一个很尴尬的事情了,当时就多想要有一个可以进行线上聊天的网站呀,不用每次痛苦的 ...

  8. 基于 socket.io 的 AI 服务 杂谈

    为什么会想到来聊下这个话题. 前几天在公司的项目中,开发一个基于 socket.io 的直播 IM 功能. 直播分为两部分,一部分是比较昂贵的 视频推流, 另外一部分是 IM 即时聊天服务. 从这里开 ...

  9. .net下使用socket.io随笔记录

    一.问题背景 目前公司在互联网产品上需要程序与前端部分要进行一个实时交互,在进行一定程度上的选型后,决定使用socket.io框架进行一个实践,算是公司的一个新的 尝试,也算是给自己增加增长见闻,由于 ...

随机推荐

  1. Android布局之线性布局——LinearLayout

    本文将详细介绍线性布局的各种xml属性. xml属性 <?xml version="1.0" encoding="utf-8"?> <Line ...

  2. 【02】一个实现h5的拖放的整个过程-魔芋

    [02]拖放的整个过程-魔芋   01,创建2个元素,一个为拖放元素dragEle,一个是存放的元素targetEle.添加一些样式.   <div class="dragEle&qu ...

  3. ms sqlserver数据库建索引

    索引分类:从物理结构上可分为两种:聚集索引和非聚集索引 (此外还有空间索引.筛选索引.XML索引) 因为聚集索引是索引顺序与物理存储顺序一致,所以只能建一个. 聚集索引就是把数据按主键顺序存储: 因为 ...

  4. python学习笔记--python数据类型

    一.整形和浮点型 整形也就是整数类型(int)的,在python3中都是int类型,没有什么long类型的,比如说存年龄.工资.成绩等等这样的数据就可以用int类型,有正整数.负整数和0,浮点型的也就 ...

  5. 病毒的侵扰和再侵扰两道AC自动机的应用

    HDU2896 病毒的侵扰 http://vjudge.net/problem/viewProblem.action?id=16404 题目大意: 记录每个病毒的编号,并给出一些网站的源码,分别输出网 ...

  6. bzoj 3223 文艺平衡树 splay 区间翻转

    Tyvj 1728 普通平衡树 Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 17715  Solved: 7769[Submit][Status][ ...

  7. Codevs 3409 搬礼物

    时间限制: 1 s 空间限制: 64000 KB 题目等级 : 青铜 Bronze   题目描述 Description 小浣熊松松特别喜欢交朋友,今年松松生日,就有N个朋友给他送礼物.可是要把这些礼 ...

  8. Android操作系统架构

    Android操作系统架构   Android操作系统整体应用架构 Android系统架构和一些普遍的操作系统差不多,都是采用了分层的架构,从他们之间的架构图看,Android系统架构分为四个层,从高 ...

  9. CPM、CPC、CPA、PFP、CPS、CPL、CPR介绍

    一个网络媒体(网站)会包含有数十个甚至成千上万个页面,网络广告所投放的位置和价格 就牵涉到特定的页面以及浏览人数的多寡.这好比平面媒体(如报纸)的“版位”.“发行 量”,或者电波媒体(如电视)的“时段 ...

  10. Jquery操作事件

    1.文档加载事件 2.DOM单击双击事件 3.DOM获得焦点,失去焦点问题 4.DOM鼠标移入,移出事件 <!DOCTYPE html> <html> <head> ...