国产探花免费观看_亚洲丰满少妇自慰呻吟_97日韩有码在线_资源在线日韩欧美_一区二区精品毛片,辰东完美世界有声小说,欢乐颂第一季,yy玄幻小说排行榜完本

首頁 > 編程 > JavaScript > 正文

socket.io實現(xiàn)在線群聊功能

2019-11-19 16:53:41
字體:
來源:轉載
供稿:網(wǎng)友

我自己在用socket.io開發(fā),對官方網(wǎng)站上的文檔,進行簡單的整理,然后自己寫了一個簡單的聊天程序。最最開始

先安裝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的監(jiān)聽加入的app設置的http模塊了 io.sockets.on('connection',function()…)這里設置了在連接后進行的處理,代碼示例中,主要包含兩件事,一個是向前段發(fā)送news的事件,一個是監(jiān)聽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')) 之后在監(jiān)聽收到news的事件后,發(fā)送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); });});

接收發(fā)送事件 socket.io允許用戶自定義發(fā)送接收的事件。除了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'); });});

存儲數(shù)據(jù)有的時候需要存儲一些和客戶端關聯(lián)的數(shù)據(jù)在會話里,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>

發(fā)送獲取數(shù)據(jù)有的時候,你需要在發(fā)送數(shù)據(jù)后,等待服務器的消息確認。當然簡單的發(fā),可以通過兩次消息發(fā)送,來完成。這里介紹一種使用回調(diào)函數(shù)的方法:

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>

廣播向所有的連接觸發(fā)事件,這里注意:不包括本身連接的事件。

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.jsvar 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);  }); });});

以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持武林網(wǎng)。

發(fā)表評論 共有條評論
用戶名: 密碼:
驗證碼: 匿名發(fā)表
主站蜘蛛池模板: 铜陵市| 巴塘县| 赣榆县| 分宜县| 濮阳市| 九江市| 库尔勒市| 青川县| 松江区| 富阳市| 凉山| 北票市| 永康市| 饶河县| 衡南县| 翁源县| 太康县| 巩留县| 建水县| 鄂州市| 徐闻县| 通辽市| 舞阳县| 吉木乃县| 额济纳旗| 鹿邑县| 汶上县| 榕江县| 怀仁县| 龙岩市| 团风县| 宝鸡市| 府谷县| 民丰县| 凯里市| 连云港市| 盐池县| 宿松县| 黑河市| 龙山县| 黄龙县|