我自己在用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-discoverysocket.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" οnclick="javascript:chat_fn()" /><label>NickName:</label><input id="nickname" typee="text" name="nickname" /><input id="chang_name" type="button" value="nickname" οnclick="javascript:change_nickname()" />
app.jsvar 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://www.cnblogs.com/cosyer/p/6647537.html

socket.io实现在线群聊相关推荐

  1. socket.io简易教程(群聊,发送图片,分组,私聊)

    什么是Socket.io? 过去: 由于http是无状态的协议,所以实现聊天等通信功能非常困难,当别人发送一条消息时,服务器并不知道当前有哪些用户等着收消息,所以以前实现聊天通信功能最普遍的就是轮询机 ...

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

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

  3. 微信小程序的socket.io即时通讯开发(基于E聊SDK)

    1.背景: 由于微信小程序需要开发轻量,跨平台,开发时间短等特点,许多公司将小程序作为了业务展示的第一个APP.E聊客户端核心SDK 通讯部分已适配了微信小程序平台,下面分享一下适配过程中的思路与方法 ...

  4. socket.io实现聊天功能——第一章 、群聊

    效果:点击这儿 一.准备工作–搭建项目 1.确保node环境已经安好,我已将npm替换成了cnpm 淘宝镜像. 2.新建一个名为 " chat " 的文件夹. 3.在 " ...

  5. php做群聊功能,使用socket.io 实现群聊天室

    本篇向大家分享一个socket.io的使用实例,实现群聊天的功能.如果想使用socket.io那么必须借助于nodejs来实现服务端,因此我们需要在nodejs中安装socket.io 安装socke ...

  6. vue+express+websocket+mongodb在线群聊工具

    vue+express+websocket+mongodb在线群聊工具 目录 vue+express+websocket+mongodb在线群聊工具 1.项目概述 2.项目运行 3.项目代码细节 3. ...

  7. Vue全家桶+Socket.io+Koa2打造一个智能聊天室 接口已开放

    Vue.js+Socket.io+Koa2打造一个智能聊天室 Vue.js全家桶+Socket.io+Express/Koa2 打造的一个智能聊天室. 已经开源啦!为了方便大家学习,智能机器人.IP定 ...

  8. .NET下使用socket.io随笔记录

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

  9. socket.io php 聊天室,WebSocket学习(一)——基于socket.io实现简单多人聊天室

    前言 什么是Websocket呢? 我们都知道在Http协议中,客户端与服务器端的通信是靠客户端发起请求,然后服务器端收到请求再进行回应,这个过程中,客户端是主动的,服务器端是被动的.Websocke ...

最新文章

  1. Xshell连接服务器出现(To escape to local shell, press 'Ctrl+Alt+]'.)问题、xshell终端中文乱码完全解决方法
  2. java activemq demo_Spring与ActiveMQ的整合的完整demo
  3. 提高博客访问量14种方法
  4. PMCAFF | 产品经理如何提升自己的配色能力?
  5. vue 请求多个api_vue 一个input同时请求两个接口
  6. http://acm.zzuli.edu.cn/zzuliacm/problem.php?id=1895 二分
  7. 途牛java面试题_途牛java面试题.docx
  8. 漫步最优化二十七——二次插值法
  9. mysql装完是什么样儿的_Win7系统安装MySQL之后找不到指定文件与服务如何解决?...
  10. (转)查理·芒格:光靠已有的知识,你走不了多远
  11. Java——可能的文本题
  12. python 玩彩票程序 随机产生两位数与用户输入的相比较
  13. android sqlite SQLiteDatabase 操作大全 不看后悔!必收藏!看后精通SQLITE (第三部分,完整代码)
  14. python在线编辑文档-使用python编辑和读取word文档
  15. LaTeX常用表格绘制入门
  16. 电容式压力传感器分类与原理
  17. 使用spring validation完成数据后端校验-自定义校验的注解-判断是否为空
  18. 技术沙龙之IOS相机管理
  19. 【Day2.7】在华欣夜市吃海鲜大餐
  20. 在那之后,我决定做一个出色的打工仔!

热门文章

  1. 逻辑回归(使用多项式特征)
  2. 吴恩达机器学习笔记55-异常检测算法的特征选择(Choosing What Features to Use of Anomaly Detection)
  3. numpy库:常用基本
  4. scrapy基础知识之 parse()方法的工作机制思考:
  5. 松耦合和紧耦合的架构设计、性能对比
  6. 解决:请购买WinRAR许可,您注册还剩下40天(WinRAR老是弹出烦人的对话框)
  7. python开课吧官网_开课吧老师详解 学Python真的可以帮助提高办公效率吗
  8. 过滤器在图纸上的符号_终于找全了,施工图纸上那一堆难记的符号,赶紧收藏!...
  9. tkinter回调异常_Python tkinter文本修改后的回调
  10. hive金额怎么转换千位分隔符_金额字段加千位分隔符方法