今天,学习了一个最基本的基于web的实时聊天,用到的技术有nodejs,html,css,socket.io(WebSocket),sco.js,Message.js,express搭建;
知识点:
1、当我们提到实时推送这个概念时,就会涉及到WebSocket技术,这是Html5定义的一套WebSocket协议,为了更好的解决实时推送,并消耗带宽的问题;WebSocket协议是一个基于TCP的协议,它是由通信协议以及编程API组成的。WebSocket在浏览器和服务器之间建立了一个双向链接,双向通信。(客户端和服务器端都处于主动地位);也就是说服务器端和客户端可以同时发送请求。WebSocket是基于http协议的。
2、相对于WebSocket协议,http协议是一个单项的,http请求是客户端处于主动的一种通信协议,而服务端是处在被动位置,它是获取客户端提出的请求之后,对这个请求进行解析,并将其传回客户端。
3、socket.io对WebSocket这个协议,进行了进一步的封装。
实现的功能:
1、用户列表;
2、文本消息传输
3、图片传输
4、上下线通知
一、首先,我们需要搭建开发环境
1)nodejs下载,选择合适的版本与操作系统,地址:https://nodejs.org/en/download/
2)安装express,安装方法:npm install -g express --save
3)以上两步,安装完成后,开始搭建开发环境
a、在任何你喜欢的位置创建一个文件夹,例如chat文件夹;
b、进入chat文件夹中,express install express --save
c、安装依赖,npm install
4)完成以上步骤,启动服务器即可;npm start或者node ./bin/www
注意:我们在启动时,可以能会遇到出现端口被占用的报错,我们此时,需要进入./bin/www中将文本文件中的端口3000,做一下改变,就可以正常使用localhost:3000(设定的端口号)
5)总结:
a、Express是一个基于Node.js平台的,简单、灵活的web应用开发框架,它提供了一系列强大的特性,可以帮你创建各种web和移动设备应用。
b、Express也是一个MVC框架,是nodejs的启动组件。express就是用nodejs带有的那npm安装的。npm是包管理工具。
c、第三步的b,中的save选项:使得在项目发布时,不需要把node_modules放入源码中发布。只需要将package.json放入即可。当项目下载到其他平台上时,用npm install安装即可。
6)补充
我们正常启动npm start时,当程序发生改变需要重复启动,来显示新改变的内容;这样既费时,有费力;
supervisor很好的解决了这个问题;每次程序进行修改的时候,不需要重复启动,supervisor可以侦测到。
启动方法:supervisor index.js(此文件是我们写的服务器文件)
二、进行简单的实时聊天开发
1、使用socket.io来进行实时聊天开发;
学习socket.io的网址:https://socket.io/get-started/chat/
2、我们建立一个我们要编写程序的文件夹,如chat;
3、在文件夹中创建一个package.json文件,文件中写入一下内容
{
"name": "socket-chat-example",
"version": "0.0.1",
"description": "my first socket.io app",
"dependencies": {}
}
4、npm install --save express@4.15.2
5、npm init
6、因为需要使用socket.io,所有需要引入,npm install --save socket.io
6、在chat文件中创建一个index.js(服务端)
小总结:
1、引入express之后,需要通过其,建立路由,路由中的三个主要方法
a、res.send();//直接在页面上输出内容
b、res.sendFile();//里面填写的是绝对路径
c、res.sendfile();//里面填写的是相对路径
2、socket.io中使用的方法与事件
方法:a、on();用来注册事件
b、emit();用来进行消息传输
事件:a、connection;连接的事件
b、disconnection;断开连接的事件
var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);
app.get('/', function(req, res){
//res.send('<h1>Hello</h1>');
//res.sendfile('index.html');相对路径
res.sendFile(__dirname + '/index.html');
});
io.on('connection',function(socket){//建立连接
console.log('a user connection');
socket.on('disconnect', function(){//只有有了链接,才会有断开连接的说法
console.log('user disconnected');
});
socket.on('chat message', function(msg){
//console.log('message: ' + msg);仅仅服务端显示信息
//服务端应该将接受的信息传到客户端上
io.emit('chat message',msg);
});
})
http.listen(3000, function(){//3000根据实际情况设定
console.log('listening on *:3000');
});
7、在chat文件中创建一个index.html(客户端)
小总结:
1、socket.emit('chat message',$('#m').val());
将参数二$('#m').val(),获得输入框中的内容,通过chat message事件向服务端发送,
chat message像管道一样,起到了运输作用。
2、因为服务端已经有管道将获得的内容传输到服务端,服务端一定会有管道来接收这个信息。
socket.on('chat message',function(msg){
io.emit('chat message',msg);//服务端将获得的内容又发送到所有客户端
}
3、所有客户端也需要接收这个服务端发送过来的信息
socket.on('chat message',function(msg){
$('#messages').append($('<li>').text(msg));
}
<!doctype html>
<html>
<head>
<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>
</head>
<body>
<ul id="messages"></ul>
<form action="">
<input id="m" autocomplete="off" /><button>Send</button>
</form>
</body>
<script src="/socket.io/socket.io.js"></script>
<script src="https://code.jquery.com/jquery-1.11.1.js"></script>
<script>
$(function () {
var socket = io();
$('form').submit(function(){
socket.emit('chat message', $('#m').val());
$('#m').val('');
return false;
});
socket.on('chat message', function(msg){
$('#messages').append($('<li>').text(msg));
});
});
</script>
</html>