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实现的一个选择中国大学的弹框 (数据、步骤、代码)
Jul 26 Javascript
jquery实现弹出div,始终显示在屏幕正中间的简单实例
Mar 08 Javascript
Javascript闭包(Closure)详解
May 05 Javascript
每个程序员都需要学习 JavaScript 的7个理由小结
Sep 03 Javascript
jQuery插件DataTable使用方法详解(.Net平台)
Dec 22 Javascript
Angular4学习教程之DOM属性绑定详解
Jan 04 Javascript
360doc网站不登录就无法复制内容的解决方法
Jan 27 Javascript
AngularJS实现与后台服务器进行交互的示例讲解
Aug 13 Javascript
详解jQuery设置内容和属性
Apr 11 jQuery
如何使用50行javaScript代码实现简单版的call,apply,bind
Aug 14 Javascript
layer弹出层自定义提交取消按钮的例子
Sep 10 Javascript
vue 使用插槽分发内容操作示例【单个插槽、具名插槽、作用域插槽】
Mar 06 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
php实现的简单压缩英文字符串的代码
2008/04/24 PHP
php mysql数据库操作分页类
2008/06/04 PHP
php 搜索框提示(自动完成)实例代码
2012/02/05 PHP
在smarty中调用php内置函数的方法
2013/02/07 PHP
PHP利用header跳转失效的解决方法
2014/10/24 PHP
Thinkphp+smarty+uploadify实现无刷新上传
2015/07/30 PHP
PHP通过反射动态加载第三方类和获得类源码的实例
2015/11/27 PHP
Yii2.0实现生成二维码功能实例
2017/10/24 PHP
php微信开发之音乐回复功能
2018/06/14 PHP
php多进程中的阻塞与非阻塞操作实例分析
2020/03/04 PHP
JavaScript高级程序设计(第3版)学习笔记4 js运算符和操作符
2012/10/11 Javascript
JSON 对象未定义错误的解决方法
2016/09/29 Javascript
JS如何判断浏览器类型和详细区分IE各版本浏览器
2017/03/04 Javascript
JS运动特效之完美运动框架实例分析
2018/01/24 Javascript
详解Vue开发微信H5微信分享签名失败问题解决方案
2018/08/09 Javascript
解决vue中虚拟dom,无法实时更新的问题
2018/09/15 Javascript
一次Webpack配置文件的分离实战记录
2018/11/30 Javascript
[04:10]DOTA2英雄梦之声_第11期_圣堂刺客
2014/06/21 DOTA
python2.7+selenium2实现淘宝滑块自动认证功能
2018/02/24 Python
python获取url的返回信息方法
2018/12/17 Python
Python2和Python3的共存和切换使用
2019/04/12 Python
Python 一键制作微信好友图片墙的方法
2019/05/16 Python
python进阶之自定义可迭代的类
2019/08/20 Python
解决Django Haystack全文检索为空的问题
2020/05/19 Python
django 将自带的数据库sqlite3改成mysql实例
2020/07/09 Python
Python基于opencv的简单图像轮廓形状识别(全网最简单最少代码)
2021/01/28 Python
HTML5录音实践总结(Preact)
2020/05/07 HTML / CSS
银行介绍信范文
2014/01/10 职场文书
会计工作心得体会
2014/01/13 职场文书
计算机应届毕业生自荐信范文
2014/02/23 职场文书
关于美容院的活动方案
2014/08/14 职场文书
12.4法制宣传日标语
2014/10/08 职场文书
安全教育主题班会教案
2015/08/12 职场文书
详解Python小数据池和代码块缓存机制
2021/04/07 Python
教你用Python写一个植物大战僵尸小游戏
2021/04/25 Python
JavaScript分页组件使用方法详解
2021/07/26 Javascript