socket.io实现在线群聊功能


Posted in Javascript onApril 07, 2017

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery提示 &quot;object expected&quot;的解决方法
Dec 13 Javascript
JS获取页面input控件中所有text控件并追加样式属性
Feb 25 Javascript
Node.js实现简单聊天服务器
Jun 20 Javascript
从数据库读取数据后将其输出成html标签的三种方法
Oct 13 Javascript
详解JavaScript中的表单验证
Jun 16 Javascript
jquery操作angularjs对象
Jun 26 Javascript
jQuery三级下拉列表导航菜单代码分享
Apr 15 Javascript
基于js实现微信发送好友如何分享到朋友圈、微博
Nov 30 Javascript
微信小程序搜索组件wxSearch实例详解
Jun 08 Javascript
jQuery实现的弹幕效果完整实例
Sep 06 jQuery
详解jQuery中的isPlainObject()使用方法
Feb 27 jQuery
详解a标签添加onclick事件的几种方式
Mar 29 Javascript
JS+HTML5 FileReader对象用法示例
Apr 07 #Javascript
微信小程序实现图片轮播及文件上传
Apr 07 #Javascript
自带气泡提示的vue校验插件(vue-verify-pop)
Apr 07 #Javascript
JS仿Base.js实现的继承示例
Apr 07 #Javascript
vue-hook-form使用详解
Apr 07 #Javascript
ES6实现的遍历目录函数示例
Apr 07 #Javascript
如何使用vuejs实现更好的Form validation?
Apr 07 #Javascript
You might like
总集篇&特番节目先行播出!《SAO Alicization War of Underworld》第2季度TV动画4月25日放送!
2020/03/06 日漫
php mysql索引问题
2008/06/07 PHP
解析PHP汉字转换拼音的类
2013/06/18 PHP
浅析php中如何在有限的内存中读取大文件
2013/07/02 PHP
phpmailer绑定邮箱的实现方法
2016/12/01 PHP
js获取提交的字符串的字节数
2009/02/09 Javascript
基于JQuery的密码强度验证代码
2010/03/01 Javascript
jQuery删除节点的三个方法即remove()detach()和empty()
2013/12/27 Javascript
javascript实现验证身份证号的有效性并提示
2015/04/30 Javascript
AngularJS的内置过滤器详解
2015/05/14 Javascript
简述JavaScript对传统文档对象模型的支持
2015/06/16 Javascript
javascript数字验证的实例代码(推荐)
2016/08/20 Javascript
基于Javascript倒计时效果
2016/12/22 Javascript
微信小程序 input输入及动态设置按钮的实现
2017/10/27 Javascript
实时监控input框,实现输入框与下拉框联动的实例
2018/01/23 Javascript
用Vue编写抽象组件的方法
2019/05/06 Javascript
JS实现超级好看的鼠标小尾巴特效
2020/12/01 Javascript
使用python装饰器验证配置文件示例
2014/02/24 Python
python下如何查询CS反恐精英的服务器信息
2017/01/17 Python
python编程之requests在网络请求中添加cookies参数方法详解
2017/10/25 Python
python程序控制NAO机器人行走
2019/04/29 Python
Python绘图Matplotlib之坐标轴及刻度总结
2019/06/28 Python
深入了解如何基于Python读写Kafka
2019/12/31 Python
使用python turtle画高达
2020/01/19 Python
解决pip install psycopg2出错问题
2020/07/09 Python
pandas apply多线程实现代码
2020/08/17 Python
以工厂直接定价的传奇性能:Ben Hogan Golf
2019/01/04 全球购物
服装厂厂长岗位职责
2013/12/27 职场文书
感恩节活动方案
2014/01/27 职场文书
中秋节礼品促销方案
2014/02/02 职场文书
募捐倡议书
2014/04/14 职场文书
财务人员担保书
2014/05/13 职场文书
副乡长群众路线教育实践活动个人对照检查材料
2014/09/19 职场文书
《你在为谁工作》心得体会(共8篇)
2016/01/20 职场文书
2016年小学优秀班主任事迹材料
2016/02/29 职场文书
Alexa停服!网站排名将何去何从?目前还没有替代品。
2022/04/15 杂记