利用nodejs的简单web聊天

来源：互联网发布：序列比对软件编辑：程序博客网时间：2024/05/22 04:59

今天，学习了一个最基本的基于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>

阅读全文

0 0