socket.io实现在线群聊

cosyer的博客 cosyer的博客     2022-08-26     112

关键词:

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

vue+socket.io实现一个简易聊天室

    vue+vuex+elementUi+socket.io实现一个简易的在线聊天室,提高自己在对vue系列在项目中应用的深度。因为学会一个库或者框架容易,但要结合项目使用一个库或框架就不是那么容易了。功能虽然不多,但还是有收获... 查看详情

用socket.io实现websocket的一个简单例子

http://biyeah.iteye.com/blog/1295196 socket.io的介绍http://www.cnblogs.com/mazg/p/5467960.html  websocket在线测试http://www.blue-zero.com/WebSocket/ 查看详情

socket.io在线聊天室

socket.io在线聊天室由David发表在天码营 socket.io是一个JavaScript库,用来建立实时的WebApp。socket.io可以通过npm安装到Node.js的应用中,同时浏览器和服务器拥有同样的API接口。你还在思考socket.io是如何做到实时推送的么?... 查看详情

Socket.io 私信,多用户同时在线

】Socket.io私信,多用户同时在线【英文标题】:Socket.ioPrivatemessaging,withmultipleusersonlineatthesametime【发布时间】:2014-03-1709:51:37【问题描述】:所以我正在构建一个聊天应用程序,并且需要帮助弄清楚如何发送私人消息。这是我的... 查看详情

怎么使用socket.io连接websocket服务

参考技术Asocket.io封装了websocket,同时包含了其它的连接方式,比如Ajax。原因在于不是所有的浏览器都支持websocket,通过socket.io的封装,你不用关心里面用了什么连接方式。你在任何浏览器里都可以使用socket.io来建立异步的连接... 查看详情

socket.io 判断用户是在线还是离线

】socket.io判断用户是在线还是离线【英文标题】:socket.iodetermineifauserisonlineoroffline【发布时间】:2015-11-1501:29:45【问题描述】:我们可以通过这段代码来追踪连接是建立还是断开console.log(\'auserconnected\');socket.on(\'disconnect\',function(... 查看详情

socket套接字及多线程实现在线群聊示例(代码片段)

   代码:Server.javapackagecom.etc;importjava.io.BufferedWriter;importjava.io.IOException;importjava.io.InputStream;importjava.io.OutputStreamWriter;importjava.net.ServerSocket;importjava. 查看详情

使用socket.io+express+mongodb制作在线聊天室

一、先用websocket制作简易版本的聊天室使用Websocket制作简易聊天室二、再用socket.io+express+mongodb制作复杂一点的在线聊天室代码地址:https://github.com/ChangYanwei/chatroom体验地址:http://8.131.68.141:7000使用socket.io监听连接... 查看详情

javasocket编程实现群聊(超详细)(代码片段)

Javasocket编程实现群聊最终效果文末有完整代码,创作不易,点个赞再走吧~客户端之间的交流有人退出群聊时,减少在线人数实现流程1、项目结构即原理分析功能实现多客户之间聊天实时统计在线人数图形化界面创建... 查看详情

显示在线关注者的最佳方式是啥,node.js/socket.io 和 Redis

】显示在线关注者的最佳方式是啥,node.js/socket.io和Redis【英文标题】:Whatisthebestwaytoshowonlinefollowers,node.js/socket.ioandRedis显示在线关注者的最佳方式是什么,node.js/socket.io和Redis【发布时间】:2013-06-1004:17:26【问题描述】:我的应... 查看详情

使用 ejabberd 实现群聊 [关闭]

】使用ejabberd实现群聊[关闭]【英文标题】:Implementgroupchatusingejabberd[closed]【发布时间】:2015-05-2210:08:51【问题描述】:我想实现像What\'sApp这样的群聊MUC(房间聊天)有一些限制:1.用户无法获取自己加入过哪些房间的历史记录... 查看详情

使用socket.io实现简单的聊天功能(代码片段)

Socket.io实际上是WebSocket的父集,Socket.io封装了WebSocket和轮询等方法首先得在你的项目中安装socket.io$npminstallsocket.io服务端代码:varapp=require(‘http‘).createServer()vario=require(‘socket.io‘)(app)varPORT=5555;varclientCount=0;app 查看详情

使用 Socket.IO 和 NodeJS 实现音频聊天

】使用Socket.IO和NodeJS实现音频聊天【英文标题】:ImplementingAudiochatwithSocket.IOandNodeJS【发布时间】:2015-05-2207:09:57【问题描述】:我使用sails.js(node.js)和socket.IO创建了一个聊天应用程序。我需要同时实现audiochat和filetransfers。谁能... 查看详情

socket.io 的最佳 Java 服务器实现

】socket.io的最佳Java服务器实现【英文标题】:Bestjavaserverimplementationforsocket.io【发布时间】:2013-03-1205:06:18【问题描述】:我想使用socket.io将数据从服务器推送到浏览器,但项目是javatomcat之一,Github中有很多实现socket.io的服务器... 查看详情

socket.io如何进行分布式部署

...分的例子都是在单机的情况下,当有用户上线时,直接io.sockets.broadcast群发一个消息,但这是个广播消息,效率太低,特别是在使用socket.io+redispub/sub的情况下,一个用户的上下线,就给整个系统是群发一个消息,真是个悲剧.我... 查看详情

如何使用 socket.io 实现长轮询?

】如何使用socket.io实现长轮询?【英文标题】:Howtoimplementlongpollingwithsocket.io?【发布时间】:2014-01-0823:57:22【问题描述】:目前,我在node.js中创建了一个应用程序,以使用带有mysql的socket.io向所有客户端发送通知。因此,我的mys... 查看详情

Electron - 实现 http 模块和 socket.io

】Electron-实现http模块和socket.io【英文标题】:Electron-Implementhttpmoduleandsocket.io【发布时间】:2021-06-2421:28:39【问题描述】:是否可以使用socket.io在打开提供的链接时创建双向通信,并在电子vue应用程序中使用ngrok创建隧道?//import... 查看详情

websocket实现前端vue-socket.io服务端koa2(socket.io)

前端:(vue项目,main.js)//TheVuebuildversiontoloadwiththe`import`command//(runtime-onlyorstandalone)hasbeensetinwebpack.base.confwithanalias.importVuefrom‘vue‘importAppfrom‘./App‘importrouterfrom‘./router‘/ 查看详情