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

先安装socket.io:

1 npm install socket.io

利用Node的搭建Http服务

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

app.js
01 var app = require('http').createServer(handler)
02 , io = require('socket.io').listen(app)
03 , fs = require('fs')
04
05 app.listen(80);
06
07 function handler (req, res) {
08 fs.readFile(__dirname + '/index.html',
09 function (err, data) {
10 if (err) {
11 res.writeHead(500);
12 return res.end('Error loading index.html');
13 }
14
15 res.writeHead(200);
16 res.end(data);
17 });
18 }
19
20 io.sockets.on('connection', function (socket) {
21 socket.emit('news', { hello: 'world' });
22 socket.on('my other event', function (data) {
23 console.log(data);
24 });
25 });

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

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

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

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

v

ar 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 you
var 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);
});
});
}); 来源:https://cnodejs.org/topic/50a1fcc7637ffa4155b5a264

socket.io入门整理的更多相关文章

  1. socket.io入门整理教程

    socket.io入门整理  发布于 5 年前  作者 dtrex  124983 次浏览  最后一次编辑是 1 年前 我自己在用socket.io开发,对官方网站上的文档,进行简单的整理,然后自己写 ...

  2. Socket.io 入门 - Renyi的博客

    Socket.io Vue 中使用 NPM 安装 npm install vue-socket.io --save npm install --save socket.io-client 引用 详情 ...

  3. 转载:socket.io 入门

    原文链接:http://cnodejs.org/topic/50a1fcc7637ffa4155b5a264 我自己在用socket.io开发,对官方网站上的文档,进行简单的整理,然后自己写了一个简单 ...

  4. Node.js、Express、Socket.io 入门

    前言 周末断断续续的写了第一个socket.io Demo.初次接触socket.io是从其官网看到的,看着get started做了一遍,根据官网的Demo能提供简单的服务端和客户端通讯. 这个De ...

  5. socket.io 入门教程

    转载自:http://deadhorse.me/nodejs/2011/12/29/socket.io_induction.html socket.io socket.io是一个以实现跨浏览器.跨平台 ...

  6. socket.io 入门篇(三)

    本文原文地址:https://www.limitcode.com/detail/5926e3a056fba70278bf2044.html 前言 上篇我们介绍了 socket.io 中room的概念和 ...

  7. socket.io 入门篇(二)

    本文原文地址:https://www.limitcode.com/detail/5922f1ccb1d4fe074099d9cd.html 前言 上篇我们介绍了 socket.io 基本使用方法,本篇 ...

  8. socket.io 入门篇(一)

    本文原文地址:https://www.limitcode.com/detail/591b114bb1d4fe074099d9c9.html 前言 本篇介绍使用node.js模块组件socket.io实 ...

  9. socket.io入门示例参考

    参考示例地址:http://www.linchaoqun.com/html/cms/content.jsp?menu=nodejs&id=1480081169735

随机推荐

  1. 《转》'autocomplete="off"'在Chrome中不起作用解决方案

    最近项目中遇到一个令人头疼的问题,查阅各种资料,尝试各种方法,最终得以解决:哎···下面就说说这心酸的历程吧. 大家都知道autocomplete属性是表单字段中的HTML5新属性,该属性有两种状态值 ...

  2. springboot 在tomcat中启动两次

    我开始以为眼花了,tomcat启动的时候, .   ____          _            __ _ _ /\\ / ___'_ __ _ _(_)_ __  __ _ \ \ \ \( ...

  3. 【题解】51nod1327 棋盘游戏

    那天和机房的同学们一起想了很久,然而并没有做出来……今天看了题解,的确比较巧妙,不过细细想来其实规律还是比较明显,在这里记录一下~ 当天自己做的时候,主要想到的是两点 : 1.按列dp 2.对行进行排 ...

  4. [NOI2017]蔬菜 贪心

    题面: [NOI2017]蔬菜 题解: 首先每天蔬菜会变质这点并不好处理,我们考虑让时间倒流,从后向前处理,这样的话就相当于每天都会得到一定量的蔬菜. 这样做有什么好处呢? 我们可以发现一个性质:如果 ...

  5. 洛谷4577 & LOJ2521:[FJOI2018]领导集团问题——题解

    https://www.luogu.org/problemnew/show/P4577 https://loj.ac/problem/2521 参考:https://www.luogu.org/blo ...

  6. 洛谷 P3332 [ZJOI2013]K大数查询 解题报告

    P3332 [ZJOI2013]K大数查询 题目描述 有\(N\)个位置,\(M\)个操作.操作有两种,每次操作如果是\(\tt{1\ a\ b\ c}\)的形式表示在第\(a\)个位置到第\(b\) ...

  7. bzoj4518: [Sdoi2016]征途(DP+决策单调性分治优化)

    题目要求... 化简得... 显然m和sum^2是已知的,那么只要让sigma(si^2)最小,那就变成了求最小平方和的最小值,经典的决策单调性,用分治优化即可. 斜率优化忘得差不多就不写了 #inc ...

  8. BZOJ1491 洛谷2047 NOI2007 社交网络

    Description: 在社交网络(social network)的研究中,我们常常使用图论概念去解释一些社会现象.不妨看这样的一个问题.在一个社交圈子里有n个人,人与人之间有不同程度的关系.我 们 ...

  9. 在Linux中新增与删除用户可以使用命令:Useradd

    在Linux中新增与删除用户可以使用命令:Useradd 我们先使用man命令理解一下Useradd的用法 新增与删除用户操作需要先获取高级用户权限 输入命令:sudo -i 确定后输入高级用户密码 ...

  10. HDU4027 线段树

    Can you answer these queries? Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 65768/65768 K ...