php socket.io教程,零基础搭建网页聊天室（socket.io使用教程）

开始吧，我们做个聊天应用！

在这个教程里，我们将制作一个简单的网页聊天应用。它机会不要求你有任何关于Node.js或Socket.io的基础，所以这份教程适合任何水平的开发者。先看看Demo。

介绍

曾经写一个网页聊天应用可能会用到网页工具套件LAMP、PHP，那时候非常困难。因为客户端要不断地像服务器发送请求，查看是否有信息变化，体验起来非常慢。

Socket通信是传统解决实时通讯的一种方案，它提供了服务器和客户端之间的双向通信。

这就意味着，服务器可以把消息推送给客户端，无论何时你发送了一个消息，客户端都能接受到你的消息，并将它推送给其他连接的用户。

网站框架

我们的第一个目标是建立起一个简单的HTML页面(提供一个提交输入信息的Form表单，和一个对话的列表)。我还还将通过Node.js的web框架express。首先，我们需要保证电脑已经安装了Node.js(如何安装Node)。

第一步，我们先创建一个package.json文件，它用来描述这个项目。我推荐你把它放在一个新建的空文件夹内。(我把我新建的文件夹名叫做chat-example.)

{

"name": "socket-chat-example",

"version": "0.0.1",

"description": "my first socket.io app",

"dependencies": {}

}

现在，为了简单的package.json中的dependencies(依赖)，我们将使用npm install --save命令。

npm install --save express@4.10.2

现在，我们已经装好了express，接下来，我们创建一个新的文件index.js来当做我们的服务器端文件。

var app = require('express')();

var http = require('http').Server(app);

app.get('/', function(req, res){

res.send('

Hello world

');

});

http.listen(3000, function(){

console.log('listening on *:3000');

});

这三段代码可以解释为：

Express初始化了app，让它充当一个HTTP服务器。

我们定义了一个路由处理器／，当我们输入网址的时候，它进入到文件根目录。

我们让HTTP服务器监听3000端口

这时，如果你输入

node index.js

你将会看到

如果你在浏览器中输入

http://localhost:3000

提供HTML

到目前为止，我们index.js中用了res.send来传递了一段HTML字符串，如果我们将整段HTML代码用这样的方式传递，会显得很奇怪，所以我们将创建index.html并传递它

我们用sendFile重新写一下路由处理器

app.get('/', function(req, res){

res.sendFile(__dirname + '/index.html');

});

并创建index.html

Socket.IO chat

body,form,#message,li {

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;

}

Send

如果你重启了这个进程(按Ctrl/Cmd + C再输入node index.js)，刷新页面就可以看到：

使用Socket.io

Socket.io由两部分组成：

一个Node.js HTTP服务器的应用socket.io(此处原文为：A server that integrates with (or mounts on) the Node.JS HTTP Server: socket.io)

一个客户端的js库socket.io-client

我们只需安装一个模块就可以来使用：

npm install --save socket.io

这样会自动保存dependency到package.json。现在，我们开始编辑index.js吧！

var app = require('express')();

var http = require('http').Server(app);

var io = require('socket.io')(http);

app.get('/', function(req, res){

res.sendfile('index.html');

});

io.on('connection', function(socket){

console.log('a user connected');

});

http.listen(3000, function(){

console.log('listening on *:3000');

});

注意到，我通过传递了http对象(HTTP服务器)新建了一个socket.io实例，接着，我对传递进来的套接字(socket)，监听connection事件，并将事件答应到console。

现在在index.html中，我在