脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → node.js → socket.io在线群聊

socket.io实现在线群聊功能

 更新时间：2017年04月07日 11:48:08   作者：cosyer  
这篇文章主要为大家详细介绍了socket.io实现在线群聊功能的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

我自己在用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);
  });
 });});

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • node.js中的console.error方法使用说明

    node.js中的console.error方法使用说明

    这篇文章主要介绍了node.js中的console.error方法使用说明,本文介绍了console.error的方法说明、语法、接收参数、使用实例和实现源码,需要的朋友可以参考下
    2014-12-12
  • nodejs 日志模块winston的使用方法

    nodejs 日志模块winston的使用方法

    本篇文章主要介绍了nodejs 日志模块winston的使用方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-05-05
  • nodejs express搭建服务并热更新文件过程详解

    nodejs express搭建服务并热更新文件过程详解

    这篇文章主要为大家介绍了nodejs express搭建服务并热更新文件过程详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-11-11
  • Node.js node-schedule定时任务隔多少分钟执行一次的方法

    Node.js node-schedule定时任务隔多少分钟执行一次的方法

    这篇文章主要介绍了Node.js node-schedule定时任务隔多少分钟执行一次的方法,本文给出了每隔 15 分钟、 30 分钟执行一次任务的编码实例,需要的朋友可以参考下
    2015-02-02
  • node+express制作爬虫教程

    node+express制作爬虫教程

    这篇文章主要介绍了node+express制作爬虫的详细过程和相关基础知识，非常的不错,需要的朋友可以参考下
    2016-11-11
  • node+koa+canvas绘制出货单、收据票据的方法

    node+koa+canvas绘制出货单、收据票据的方法

    在生成票据需求中，我们会想到前端生成或者后端生成返回图片地址访问两个方法，前端生成则不需要调用接口，而后端是在完成整个流程时就进行生成然后把上传的地址保存数据库，这篇文章主要介绍了node+koa+canvas绘制出货单，收据，票据,需要的朋友可以参考下
    2022-09-09
  • NPM全局安装与本地安装的区别详析

    NPM全局安装与本地安装的区别详析

    NPM是随同NodeJS一起安装的包管理工具,能解决NodeJS代码部署上的很多问题,下面这篇文章主要给大家介绍了关于NPM全局安装与本地安装区别的相关资料,需要的朋友可以参考下
    2022-10-10
  • Node.JS 循环递归复制文件夹目录及其子文件夹下的所有文件

    Node.JS 循环递归复制文件夹目录及其子文件夹下的所有文件

    在Node.js中，要实现目录文件夹的循环递归复制也非常简单，使用fs模块即可，仅需几行，而且性能也不错，我们先来实现文件的复制,需要的朋友可以参考下
    2017-09-09
  • 利用express启动一个server服务的方法

    利用express启动一个server服务的方法

    下面小编就为大家带来一篇利用express启动一个server服务的方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • node+js搭建时间服务器的思路详解

    node+js搭建时间服务器的思路详解

    这篇文章主要介绍了node+js搭建时间服务器,通过本文的学习可以了解node的fs模块怎么读取数据及express怎么搭建服务器，设置数据接口的，需要的朋友可以参考下
    2022-07-07

最新评论