# demo_lalm

**Repository Path**: shuinan/demo_lalm

## Basic Information

- **Project Name**: demo_lalm
- **Description**: 一个基于lalm的演示程序
- **Primary Language**: NodeJS
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 2
- **Created**: 2023-02-08
- **Last Updated**: 2023-04-11

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 基于 websocket 的聊天室

经过一天学习，尝试用 `socket.io` 搭建了一个简易的聊天室，用户只需访问聊天室地址，输入一个用户名即可使用，用户界面左上角显示当前用户、左下角显示当前在线用户、右侧为聊天界面，用户可输入文字、粘贴图片、发送附件；
实际效果如下图：
![效果图](./readme-assets/how-it-looks-like.png)

## 1 初始化项目

创建一个目录`chat`，进入到目录中，初始化项目

```sh
mkdir chat #创建目录
cd chat  #进入到项目目录
npm init -y # 初始化项目
```

## 2 安装依赖包

由于该项目是一个 web 聊天项目，我选用`express`搭建服务器，`socket.io`进行前后端的通讯

```sh
npm install -S express #安装express包
npm install -S socket.io #安装socket.io包
```

## 3 搭建并启动服务器

先使用`express`搭建起服务器先

```js
var express = require("express"); //使用express搭建服务端
var http = require("http"); //可直接使用express启动服务吗，但考虑要使用socket.io,这里用http模块作为express和socket.io的媒介(这是我猜的)
var path=require("path");
var SocketIO = require("socket.io"); //引入socket.io包
var app=express();
app.use(express.static(path.join(__dirnanme,"html"));//设置静态资源目录
var httpServer=http.Server(app);
var server=new SocketIO(httpServer,{}); //第二个参数为配置，我没填，有必要再了解
httpServer.listen(8080);//监听8080端口
```

## 4 聊天室 UI

### 4.1 UI 结构

该聊天室的大致画面如下图：
![聊天室结构图](./readme-assets/structure.png)

### 4.2 引入资源文件

样式采用`bootstrap`,`DOM`操作使用`jquery`,可到[bootcdn](https://www.bootcdn.cn/)下载

```html
<!--上面的部分-->
<link rel="stylesheet" href="./assets/bootstrap/css/bootstrap.css" />
<script src="./assets/jquery.js"></script>
<!--下面的部分-->
```

### 4.3 前端使用`socket.io`

因为前端也要使用`socket.io`，所以需要`socket.io.js`文件，启动服务(8080 端口)后，在浏览器打开[http://localhost:8080/socket.io/socket.io.js](http://localhost:8080/socket.io/socket.io.js),保存这个文件到`assets`文件夹下，然后再引用

```html
<!--上面的部分-->
<script src="./assets/socket.io.js"></script>
<!--下面的部分-->
```

### 4.3 源码

代码的编写过程就不在这里写了，具体见文件代码

## 5 需求及实现思路

1.  访问聊天室需先输入使用者名(随便写),再连接服务器

        关键：io.connect(服务器)

2.  服务端自动向客户端推送当前在线用户

        关键：服务端用 socketList 变量存储所有与客户端的 socket、socket.emit(eventName,value)推送在线用户(一个数组)到客户端

3.  在客户端界面输入文字发送广播

        关键：客户端emit(eventName,data),服务端on(eventName,function(){})

4.  客户端粘贴动作会广播剪贴板中的图片

        关键：客户端emit(eventName,data),服务端on(eventName,function(){})

5.  客户端发送文件

        关键：客户端emit(eventName,data),服务端on(eventName,function(){}), fs模块

## 6 测试

经测试，没有问题!