# php-websocket-chat

**Repository Path**: duans/php-websocket-chat

## Basic Information

- **Project Name**: php-websocket-chat
- **Description**: PHP+WebSocket实现的网页聊天案例
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 1
- **Created**: 2019-09-24
- **Last Updated**: 2022-06-28

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# PHP+WebSocket版聊天机器人案例

# server 服务端

- 服务端默认监听端口: `8083`

- 服务端地址:`ws:127.0.0.1:8083`

## 运行方式

- 在`server`目录下打开命名行, 执行以下命令, 启动服务端(必须将php加入系统环境变量, 否则提示无法识别php命令)

```
php index.php
```

# client 客户端

## 打开方式

- 以文件的方式打开: 直接通过浏览器打开即可

- 以服务器的方式打开: 
    + 将`client`下的文件拷贝到任意一个`web`服务器的目录下
    + 直接在`client`目录下快速开启一个`web`服务, 可借助node平台下`live-server`

## 核心代码

```js
 // 1-创建一个webscoket实例
var ws = new WebSocket("ws://127.0.0.1:8083");
// 2-打开一个socket通道
ws.onopen = function () { ws.send(`msg='hi'`); };
// 点击按钮,发送消息
function sendMsg() {
    // 获取用户输入的消息内容
    var msg = $("#msg").val().trim();
    if (msg == '') {
    $('#msg').focus();
    return false;
    }
    var html = `<div class="alert alert-warning"><strong>我:&nbsp;</strong>${msg}</div>`
    $("#chat-content").append(html);
    // 滚动到div#chat-content底部
    autoScroll();
    // 清空输入框内容
    $('#msg').val('');
    // 3-发送消息
    ws.send(`msg=${msg}`);
}

function keyupHandle(event) {
    if (event.keyCode == 13) {
    sendMsg();
    }
}

// 自动滚动到聊天内容底部

function autoScroll() {
    // $('#chat-content').scrollTop($('#chat-content').outerHeight);
    var chat = $("#chat-content");
    chat.animate({ scrollTop: chat[0].scrollHeight - chat.height() }, 100)
}



// 4-监听服务端的响应
ws.onmessage = function (event) {
    var html = `<div class="alert alert-success"><strong>她:&nbsp;</strong>${event.data}</div>`
    $("#chat-content").append(html);
    // 滚动到div#chat-content底部
    autoScroll();
};

// 5-监听websocket关闭
ws.onclose = function () {
    // 关闭 websocket
    alert("连接已关闭...");
};
```

![界面展示](media/chat.png)