# nodeJs_chat1
**Repository Path**: skyqi/nodeJs_chat1
## Basic Information
- **Project Name**: nodeJs_chat1
- **Description**: 使用NodeJs开发一个简单的聊天室， 熟悉socket套字装No.1
- **Primary Language**: NodeJS
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 0
- **Forks**: 0
- **Created**: 2019-03-03
- **Last Updated**: 2020-12-19
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
我们要做一个聊天室，简单起见，功能可以是这些：
1. 每个人有自己的昵称，在进入聊天室的时候自己输入。
2. 每个人都可以发言
3. 有一个区域用来展示所有的发言，并且要实时更新
4. 有人加入的时候提示xxx加入了群聊
第一步，初始设定
1，在window安装nodejs，这一步省。
2，检查环境及安装
npm config ls //修改文件夹名
npm install express //安装express框架
npm install socket
在E:\node_IM\development\node-chat当前目录，多出一个node_modules目录。
└─node-chat
└─node_modules
├─express
│ ├─lib
│ │ ├─middleware
│ │ └─router
│ └─node_modules
│ ├─.bin
│ ├─accepts
│ ├─array-flatten
│ ├─body-parser
│ │ └─lib
│ │ └─types
│ ├─bytes
│ ├─content-disposition
│ ├─content-type
│ ├─cookie
│ ├─cookie-signature
......
├─socket.io
新建server.js文件在node-chat目录。
3，在vscode环境调试运行：
Administrator@7O1CMG3I79XXOLV MINGW64 /e/node_IM/development/node-chat
$ node server.js
listening on *:8080
第二步，聊天室页面的实现
1，在index.html中输入以下代码：
```
Socket.IO chat
```
保存。2，根目录跳转
前面我们在server.js中写了根目录返回hello world，现在我们让它跳转到聊天室页面。将server.js中的
```
//当访问根目录时，返回Hello World
app.get('/', function (req, res) {
res.send('Hello world
');
});
```
替换为
```
app.get('/', function(req, res){
res.sendFile(__dirname + '/index.html');
});
```
然后在CMD中ctrl+c结束，重新运行node server.js。
现在在浏览器中访问localhost:8080，已经跳转到聊天页面了。
第三，引入Socket
1，继续修改server.js，增加下方标注内容：
```
var express = require('express');
var app = express();
var http = require('http').Server(app); //将express注册到http中
var io = require('socket.io')(http);
//当访问根目录时，返回Hello World
app.get('/', function (req, res) {
res.sendFile(__dirname+"/index.html");
});
var usocket = [];
io.on('connection',function(socket){
console.log('a user connect'); //当有新的socket连接成功之后，就打印一下信息。
});
//启动监听，监听3000端口
http.listen(8080, function () {
console.log('listening on *:8080');
});
```
2，然后编辑index.html，添加jquery.min.js和socket.io.js
```
```
然后我们重新启动node服务，访问localhost:3000。就会有以下结果。
第三，添加交互
当用户有动作的时候，我们要显示在聊天面板中，就插入一个li标签好了。在index.html的script中写一个方法，后面显示什么内容，就调用这个方法在面模板中插入一条li就好了。在前面功能分析的时候，我们就说用户刚进来的时候，需要输入自己的昵称。
将以下代码写到index.html中。
```
> var name = prompt("请输入你的昵称：");
> function addLine(msg) {
> $('#messages').append($('').text(msg));
> }
```
1，发送昵称数据到后端
新用户发送自己的昵称给服务器后，要让所有处在聊天室的人知道，所以服务器要发一个广播。发送数据给后端，调用socket的emit方法，这里指定一个事件名字叫join，然后后端会处理这个事件。
然后现在我们的script标签中是这样的。
```
```
2，后端发送广播
为了在后端区分用户，我们用一个usocket数组来保存每一个用户的socket实例。
首先监听join事件，在接收到昵称之后，将该用户的加入聊广播给所有用户。
server.js代码如下：
```
var express = require('express');
var app = express();
var http = require('http').Server(app); //将express注册到http中
var io = require('socket.io')(http);
//当访问根目录时，返回Hello World
app.get('/', function (req, res) {
res.sendFile(__dirname+"/index.html");
});
var usocket = []; //全局变量
io.on('connection',function(socket){ //
console.log('a user connect');
//监听join事件
socket.on("join", function (name) {
usocket[name] = socket;
console.log(usocket);
io.emit("join", name) //服务器通过广播将新用户发送给全体群聊成员
})
//new addition
socket.on("message", function (msg) {
io.emit("message", msg) //将新消息广播出去
})
});
//启动监听，监听3000端口
http.listen(8080, function () {
console.log('listening on *:8080');
});
```
然后在index.html的script中添加以下代码，接受到新用户加入事件的处理：
```
```
现在我们再来测试一下，node server.js开启后端服务，然后访问localhost:8080，输入用户名iimT
演示效果：
