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 相关文章推荐
求解开jscript.encode代码的asp函数
Feb 28 Javascript
两个DIV等高的JS的实现代码
Dec 23 Javascript
整理8个很棒的 jQuery 倒计时插件和教程
Dec 12 Javascript
详谈LABJS按需动态加载js文件
May 07 Javascript
详解页面滚动值scrollTop在FireFox与Chrome浏览器间的兼容问题
Dec 03 Javascript
基于jQuery实现二级下拉菜单效果
Feb 01 Javascript
js提交form表单,并传递参数的实现方法
May 25 Javascript
canvas实现简易的圆环进度条效果
Feb 28 Javascript
VUE实现日历组件功能
Mar 13 Javascript
Koa2微信公众号开发之消息管理
May 16 Javascript
JavaScript常用工具函数大全
May 06 Javascript
vue3.0 数字翻牌组件的使用方法详解
Apr 20 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
oracle资料库函式库
2006/10/09 PHP
php中的strpos使用示例
2014/02/27 PHP
ZendFramework2连接数据库操作实例
2017/04/18 PHP
VBScript版代码高亮
2006/06/26 Javascript
JavaScript 语言的递归编程
2010/05/18 Javascript
JavaScript中valueOf函数与toString方法深入理解
2012/12/02 Javascript
Javascript中的for in循环和hasOwnProperty结合使用
2013/06/05 Javascript
js校验表单后提交表单的三种方法总结
2014/02/28 Javascript
jquery右下角自动弹出可关闭的广告层
2015/05/08 Javascript
聊一聊Vue.js过渡效果
2016/09/07 Javascript
Bootstrap 下拉多选框插件Bootstrap Multiselect
2017/01/22 Javascript
js实现类bootstrap模态框动画
2017/02/07 Javascript
简单实现AngularJS轮播图效果
2020/04/10 Javascript
JavaScript中this的用法及this在不同应用场景的作用解析
2017/04/13 Javascript
Vue.js实现网格列表布局转换方法
2017/08/25 Javascript
通俗易懂地解释JS中的闭包
2017/10/23 Javascript
js断点调试心得分享(必看篇)
2017/12/08 Javascript
javascript代码优化的8点总结
2018/01/29 Javascript
vue-cli脚手架引入图片的几种方法总结
2018/03/13 Javascript
JS实现移动端触屏拖拽功能
2018/07/31 Javascript
node.js环境搭建图文详解
2018/09/19 Javascript
ES2020 已定稿,真实场景案例分析
2020/05/25 Javascript
解决Vue中使用keepAlive不缓存问题
2020/08/04 Javascript
如何在vue中使用kindeditor富文本编辑器
2020/12/19 Vue.js
python3.5+tesseract+adb实现西瓜视频或头脑王者辅助答题
2018/01/17 Python
Python实现的线性回归算法示例【附csv文件下载】
2018/12/29 Python
matplotlib绘制鼠标的十字光标的实现(内置方式)
2021/01/06 Python
18-35岁旅游团的全球领导者:Contiki
2017/02/08 全球购物
美国婴儿和儿童服装购物网站:PatPat
2020/10/01 全球购物
大专计算机个人求职的自我评价
2013/10/21 职场文书
优秀学生自我鉴定范例
2013/12/18 职场文书
医科大学毕业生自荐信
2014/02/03 职场文书
2014年感恩节活动策划方案
2014/10/06 职场文书
幼儿园六一儿童节活动总结
2015/02/10 职场文书
高三数学复习备考教学反思
2016/02/18 职场文书
css3 filter属性的使用简介
2021/03/31 HTML / CSS