php socket 仿微信,node.js(一) web Socket 仿微信聊天室

Socket.io是Node.js的一个模块,它展现出一些让Node.js与其它语言如(c++、java、php、python)等不同的地方。本篇博客将给予Node.js的Socket.io模块,创建实时的应用程序,仿微信的在线聊天系统。

1. 创建一个文件夹，暂且命名为 wechat

2. 在wechat文件夹中，创建一个名为package.json的新文件,并添加如下内容将Socket.io申明为依赖模块：

{

"name": "socket.io",

"version": "1.0.0",

"description": "",

"main": "index.js",

"dependencies": {

"socket.io": "2.0.3"

},

"author": "lv",

"license": "ISC"

}

3. 在wechat文件夹中，创建一个带有如下内容的、名为app.js的新文件：

var http=require('http')

var fs=require('fs')

var server=http.createServer((req,res)=>{

fs.readFile('./index.html',(err,data)=>{

res.writeHead(200,{'Content-Type':'text/html'})

res.end(data,'utf-8')

})

}).listen(3000,'127.0.0.1')

console.log('服务器运行在 127.0.0.1:3000端口')

var io=require('socket.io').listen(server)

io.sockets.on('connection',(socket)=>{

socket.on('message',(data)=>{

socket.broadcast.emit('push message',data)

})

})

4.在wechat文件夹中,创建一个带有如下内容的、名为index.html的新文件：

客户端socket聊天室

点击发送

var socket=io.connect('http://127.0.0.1:3000')

var message=document.getElementById('message')

//写个button 点击发送

$('button').click(()=>{

// 判断一下内容是否为空,若用户输入了空的内容,则不能发送！

if($("#message")[0].value==null || $("#message")[0].value==''){

console.log('内容为空！ 请重新输入');

}else{

socket.emit('message',{text:message.value})

//console.log(message.value);

$('.main').append('

'+' '+' '+message.value+' '+' '+'

'+'
'+'
'+'

'+'

');

// 点击发送后,将input框里面的内容清空！

$("#message")[0].value='';

return false

}

})

socket.on('push message',(data)=>{

console.log(data.text)

$('.main').append('

'+' '+' '+data.text+' '+' '+'

'+'
'+'
'+'

'+'

')

})

*{

padding: 0;

margin: 0

}

.main{

width: 800px;

height: 400px;

margin: 20px auto;

overflow: auto;

border: 1px solid gray;

background: #eee;

}

.content{

width: 800px;

height: 600px;

/*border: 1px solid red;*/

margin: 0 auto;

}

#message-form{

float: right;

}

.p1{

margin-right: 10px;

line-height: 40px;

display: block;

float: right;

text-align: right;

border-radius: 2px;

background: #b2e281;

}

.p2{

margin-left: 10px;

line-height: 40px;

display: block;

float: left;

text-align: left;

border-radius: 2px;

background: white;

}

5. 终端运行如下命令，安装依赖模块

npm i

6. 从终端运行如下命令启动服务器：

node app

7. 打开浏览器访问 127.0.0.1:3000

8. 打开另一个浏览器选项卡访问 127.0.0.1:3000

9. 在那个输入框里面输入聊天信息，我们发现可以自己与自己聊天了

可以看到已经可以自己跟自己聊天了，仅限于本地聊天。

001.PNG

002.PNG