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 相关文章推荐
js中Math之random,round,ceil,floor的用法总结
Dec 26 Javascript
jquery动感漂浮导航菜单代码分享
Apr 15 Javascript
javascript伸缩菜单栏实现代码分享
Nov 12 Javascript
详解angular element()方法使用
Apr 08 Javascript
jQuery DOM节点的遍历方法小结
Aug 15 jQuery
Jquery实现无缝向上循环滚动列表的特效
Feb 13 jQuery
JavaScript中的事件与异常捕获详析
Feb 24 Javascript
详解js动态获取浏览器或页面等容器的宽高
Mar 13 Javascript
JS数组push、unshift、pop、shift方法的实现与使用方法示例
Apr 29 Javascript
vue移动端弹起蒙层滑动禁止底部滑动操作
Jul 22 Javascript
前端vue+elementUI如何实现记住密码功能
Sep 20 Javascript
Vue中使用import进行路由懒加载的原理分析
Apr 01 Vue.js
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
php字符集转换
2017/01/23 PHP
redis+php实现微博(一)注册与登录功能详解
2019/09/23 PHP
asp.net和php的区别点总结
2019/10/10 PHP
jQuery学习4 浏览器的事件模型
2010/02/07 Javascript
JS前端框架关于重构的失败经验分享
2013/03/17 Javascript
JavaScript作用域链示例分享
2014/05/27 Javascript
JavaScript实现在页面间传值的方法
2015/04/07 Javascript
AngularJS实践之使用NgModelController进行数据绑定
2016/10/08 Javascript
详解vue-router 2.0 常用基础知识点之导航钩子
2017/05/10 Javascript
微信小程序实现移动端滑动分页效果(ajax)
2017/06/13 Javascript
JS实现批量上传文件并显示进度功能
2017/06/27 Javascript
基于VUE.JS的移动端框架Mint UI的使用
2017/10/11 Javascript
详解angular分页插件tm.pagination二次触发问题解决方案
2018/07/20 Javascript
浅谈Vue.js 关于页面加载完成后执行一个方法的问题
2019/04/01 Javascript
页面内锚点定位及跳转方法总结(推荐)
2019/04/24 Javascript
微信小程序日历弹窗选择器代码实例
2019/05/09 Javascript
使用apifm-wxapi模块中的问题及解决方法
2019/08/05 Javascript
vue计算属性无法监听到数组内部变化的解决方案
2019/11/06 Javascript
Nuxt的路由配置和参数传递方式
2020/11/06 Javascript
[01:02:18]VGJ.S vs infamous Supermajor 败者组 BO3 第一场 6.4
2018/06/05 DOTA
python3模拟百度登录并实现百度贴吧签到示例分享(百度贴吧自动签到)
2014/02/24 Python
Python中一些自然语言工具的使用的入门教程
2015/04/13 Python
Python的requests网络编程包使用教程
2016/07/11 Python
在django中使用自定义标签实现分页功能
2017/07/04 Python
python图形工具turtle绘制国际象棋棋盘
2019/05/23 Python
Django 后台获取文件列表 InMemoryUploadedFile的例子
2019/08/07 Python
医学生职业规划范文
2014/01/05 职场文书
教师师德考核自我评价
2014/09/13 职场文书
工商局领导班子存在的问题整改措施思想汇报
2014/10/05 职场文书
党委班子纠正“四风”问题整改措施
2014/10/28 职场文书
2014工程部年度工作总结
2014/12/17 职场文书
2016年度农村党员干部主题教育活动总结
2016/04/06 职场文书
使用nginx动态转换图片大小生成缩略图
2021/03/31 Servers
JavaScript实现酷炫的鼠标拖尾特效
2022/02/18 Javascript
浅析python中特殊文件和特殊函数
2022/02/24 Python
GO语言异常处理分析 err接口及defer延迟
2022/04/14 Golang