Socket.IO聊天室~简单实用
生活随笔
收集整理的這篇文章主要介紹了
Socket.IO聊天室~简单实用
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
小編心語：大家過完圣誕準備迎元旦吧~小編在這里預祝大家元旦快樂！！這一次要分享的東西小編也不是很懂啊，總之小編把它拿出來是覺地比較稀奇，而且程序也沒有那么難，是一個比較簡單的程序，大家可以多多試試~
Socket.IO聊天室
簡介：Socket.IO實現了實時雙向的基于事件的通訊機制。旨在讓各種瀏覽器與移動設備上實現實時app功能，模糊化各種傳輸機制。
下面我們使用Node.js和Socket.IO來做一個簡單的聊天室。
打開虛擬機終端，新建一個文件夾socketio，進入此文件夾使用npm初始化項目：
$ npm init
然后輸入項目相關信息，也可以不輸入，直接一路回車，完成后會在此目錄下生產一個package.json文件。這個文件用于描述項目相關信息，以及聲明項目中所使用的模塊。
然后安裝Socket.IO：
$ npm install socket.io --save
安裝Socket.IO的時候，--save參數用于保存模塊依賴信息到package.json文件，安裝完后，打開package.json文件會看到里面多了一項內容：
"dependencies": {"socket.io": "^1.2.1" }
同時Socket.IO安裝在了node_modules文件夾下。
首先在index.js中添加如下代碼，引入所需的模塊：
var http = require('http'); // http 模塊，用于創建http server var socketio = require('socket.io'); // socket.io 模塊 var fs = require('fs'); // fs 模塊，用于讀取文件
然后通過http模塊創建app，在index.js文件中添加代碼： // http.createServer()方法用于創建http server // 以處理來自瀏覽器的請求 var app = http.createServer(function(req, res) {// fs.readFile()方法用于讀取文件// 此處讀取的是index.html文件// 也就是我們后面要編寫的HTML頁面文件fs.readFile(__dirname + '/index.html', function (err, data) {if (err) {res.writeHead(500);return res.end('Error loading index.html');}res.writeHead(200); // 返回請求狀態碼res.write(data); // 返回讀取到的內容給瀏覽器res.end();}); }).listen(8080); // listen()方法用監聽http server到指定的地址和端口，默認地址是localhost
在文件夾socketio中新建index.html文件，代碼如下：
<!doctype html> <html><head><meta charset="utf-8"><title>Socket.IO chat</title></head><body>Hello, shiyanlou.</body> </html>
運行程序：
$ node index.js
然后打開虛擬機中的瀏覽器，訪問“127.0.0.1:8080”瀏覽器頁面中出現“Hello, shiyanlou.”，說明創建的http server成功了。
這里在服務器端監聽了來自瀏覽器的chat事件，后面我們會在index.html中實現此事件。
先來實現一個簡單聊天界面吧，修改index.html文件中的代碼如下所示：
<!doctype html> <html><head><meta charset="utf-8"><title>Socket.IO chat</title><style>* { margin: 0; padding: 0; box-sizing: border-box; }body { font: 13px Helvetica, Arial; }#form { background: #000; padding: 3px; position: fixed; bottom: 0; width: 100%; }#form input { border: 0; padding: 10px; width: 90%; margin-right: .5%; }#form button { width: 9%; background: rgb(130, 224, 255); border: none; padding: 10px; }#messages { list-style-type: none; margin: 0; padding: 0; }#messages li { padding: 5px 10px; }#messages li:nth-child(odd) { background: #eee; }</style><!-- 引入socket.io庫和jQuery庫 --><script src="https://cdn.socket.io/socket.io-1.2.1.js"></script><script src="http://code.jquery.com/jquery-1.11.1.js"></script></head><body><!-- 顯示消息記錄 --><ul id="messages"></ul><!-- 消息發送框 --><div id="form"><input id="m" autocomplete="off" /><button id="send">Send</button></div></body> </html>
然后在瀏覽器端創建chat事件，在index.html文件中添加如下JavaScript代碼：
<script> // 連接到Socket.IO服務器 var socket = io.connect();$(function() {// 綁定發按鈕發送消息的事件$('#send').on('click', function() {var data = $('#m').val();// 創建chat事件并發送消息給服務器// emit('event') 表示發送了一個event命令// 使用io.on('event')接收對應事件的信息// 所以客戶端服務器端需要使用socket.on('chat')接收聊天信息socket.emit('chat', { msg: data });$('#m').val('');}); }); </script>
現在運行項目：
$ node index.js
使用虛擬機中的瀏覽器訪問“127.0.0.1:8080”，通過聊天框發送消息，會看到服務器端會打印出相應消息內容。
下面我們來實現把用戶發送的消息發送給所有客戶端，在index.js文件中創建sendmsg事件：
io.on('connection', function (socket) {socket.on('chat', function (data) {console.log(data);// 創建sendmsg事件并把發送聊天消息給客戶端io.emit('sendmsg', data);}); });
再重新運行項目：
$ node index.js
現在用瀏覽器打開多個頁面，就能看到別人發送的消息了，這樣一個簡單的實時聊天室就實現了。
當然，你可以自己擴展這個項目，做一個功能更加完整的聊天室。
此項目主要用到了Socket.IO的emit()方法和on()方法，emit()方法用于創建和觸發事件，on()方法用于監聽事件。
現在登陸實驗樓更有感恩好禮相送http://www.shiyanlou.com/huodong/thanks.html
Socket.IO聊天室
簡介：Socket.IO實現了實時雙向的基于事件的通訊機制。旨在讓各種瀏覽器與移動設備上實現實時app功能，模糊化各種傳輸機制。
下面我們使用Node.js和Socket.IO來做一個簡單的聊天室。
一、初始化項目
（這個是在實驗樓網站的虛擬平臺需要實現的~可自動略過這一環節，不需要也可以的哈）
打開虛擬機終端，新建一個文件夾socketio，進入此文件夾使用npm初始化項目：
$ npm init
然后輸入項目相關信息，也可以不輸入，直接一路回車，完成后會在此目錄下生產一個package.json文件。這個文件用于描述項目相關信息，以及聲明項目中所使用的模塊。
然后安裝Socket.IO：
$ npm install socket.io --save
安裝Socket.IO的時候，--save參數用于保存模塊依賴信息到package.json文件，安裝完后，打開package.json文件會看到里面多了一項內容：
"dependencies": {"socket.io": "^1.2.1" }
同時Socket.IO安裝在了node_modules文件夾下。
二、創建http server
安裝Socket.IO模塊，我們現在先來創建一個可訪問的頁面吧。
在文件夾socketio中新建index.js文件，這就是在服務端運行的主文件。首先在index.js中添加如下代碼，引入所需的模塊：
var http = require('http'); // http 模塊，用于創建http server var socketio = require('socket.io'); // socket.io 模塊 var fs = require('fs'); // fs 模塊，用于讀取文件
然后通過http模塊創建app，在index.js文件中添加代碼： // http.createServer()方法用于創建http server // 以處理來自瀏覽器的請求 var app = http.createServer(function(req, res) {// fs.readFile()方法用于讀取文件// 此處讀取的是index.html文件// 也就是我們后面要編寫的HTML頁面文件fs.readFile(__dirname + '/index.html', function (err, data) {if (err) {res.writeHead(500);return res.end('Error loading index.html');}res.writeHead(200); // 返回請求狀態碼res.write(data); // 返回讀取到的內容給瀏覽器res.end();}); }).listen(8080); // listen()方法用監聽http server到指定的地址和端口，默認地址是localhost
在文件夾socketio中新建index.html文件，代碼如下：
<!doctype html> <html><head><meta charset="utf-8"><title>Socket.IO chat</title></head><body>Hello, shiyanlou.</body> </html>
運行程序：
$ node index.js
然后打開虛擬機中的瀏覽器，訪問“127.0.0.1:8080”瀏覽器頁面中出現“Hello, shiyanlou.”，說明創建的http server成功了。
三、實現聊天
下面我們就來創建Socket.IO對象吧：
// 在與app相同的地址和端口上創建Socket.IO服務 var io = socketio(app);// 監聽connection事件 // 當瀏覽器連接到此Socket.IO服務時觸發該事件 io.on('connection', function (socket) {// 監聽瀏覽器端的chat事件socket.on('chat', function (data) {console.log(data);}); });這里在服務器端監聽了來自瀏覽器的chat事件，后面我們會在index.html中實現此事件。
先來實現一個簡單聊天界面吧，修改index.html文件中的代碼如下所示：
<!doctype html> <html><head><meta charset="utf-8"><title>Socket.IO chat</title><style>* { margin: 0; padding: 0; box-sizing: border-box; }body { font: 13px Helvetica, Arial; }#form { background: #000; padding: 3px; position: fixed; bottom: 0; width: 100%; }#form input { border: 0; padding: 10px; width: 90%; margin-right: .5%; }#form button { width: 9%; background: rgb(130, 224, 255); border: none; padding: 10px; }#messages { list-style-type: none; margin: 0; padding: 0; }#messages li { padding: 5px 10px; }#messages li:nth-child(odd) { background: #eee; }</style><!-- 引入socket.io庫和jQuery庫 --><script src="https://cdn.socket.io/socket.io-1.2.1.js"></script><script src="http://code.jquery.com/jquery-1.11.1.js"></script></head><body><!-- 顯示消息記錄 --><ul id="messages"></ul><!-- 消息發送框 --><div id="form"><input id="m" autocomplete="off" /><button id="send">Send</button></div></body> </html>
然后在瀏覽器端創建chat事件，在index.html文件中添加如下JavaScript代碼：
<script> // 連接到Socket.IO服務器 var socket = io.connect();$(function() {// 綁定發按鈕發送消息的事件$('#send').on('click', function() {var data = $('#m').val();// 創建chat事件并發送消息給服務器// emit('event') 表示發送了一個event命令// 使用io.on('event')接收對應事件的信息// 所以客戶端服務器端需要使用socket.on('chat')接收聊天信息socket.emit('chat', { msg: data });$('#m').val('');}); }); </script>
現在運行項目：
$ node index.js
使用虛擬機中的瀏覽器訪問“127.0.0.1:8080”，通過聊天框發送消息，會看到服務器端會打印出相應消息內容。
下面我們來實現把用戶發送的消息發送給所有客戶端，在index.js文件中創建sendmsg事件：
io.on('connection', function (socket) {socket.on('chat', function (data) {console.log(data);// 創建sendmsg事件并把發送聊天消息給客戶端io.emit('sendmsg', data);}); });
客戶端接收并顯示消息，在index.html中添加JavaScript代碼：
$(function() {// ...// 接收消息并顯示到消息記錄框中socket.on('sendmsg', function(msg) {$('#messages').append($('<li>').text(msg.msg));}); });再重新運行項目：
$ node index.js
現在用瀏覽器打開多個頁面，就能看到別人發送的消息了，這樣一個簡單的實時聊天室就實現了。
當然，你可以自己擴展這個項目，做一個功能更加完整的聊天室。
此項目主要用到了Socket.IO的emit()方法和on()方法，emit()方法用于創建和觸發事件，on()方法用于監聽事件。
更多詳細步驟及內容請登錄http://www.shiyanlou.com/courses/?course_type=project&tag=all?
有更多基礎課、項目課歡迎大家登陸實驗樓官方網站http://www.shiyanlou.com。現在登陸實驗樓更有感恩好禮相送http://www.shiyanlou.com/huodong/thanks.html
總結
以上是生活随笔為你收集整理的Socket.IO聊天室~简单实用的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： C语言基于GTK+Libvlc实现的简易
- 下一篇： Laravel大型项目系列教程（一）