====== 环信即时通讯 IM Web 快速开始 ======
更新时间：2022-02-28
本页面介绍如何快速集成环信即时通讯 IM Web SDK 实现单聊。
===== 实现原理 =====
下图展示在客户端发送和接收一对一文本消息的工作流程。
[[https://docs-im.easemob.com/_detail/ccim/web/sendandreceivemsg.png?id=ccim%3Aandroid%3Amessage2|{{https://docs-im.easemob.com/_media/ccim/web/sendandreceivemsg.png?w=800&tok=54ca33|img}}]]
===== 前提条件 =====
* 有效的环信即时通讯 IM 开发者账号；
* [[https://docs-im.easemob.com/ccim/config|创建环信即时通讯 IM 项目并获取 App Key]]；
* [[https://www.npmjs.com/get-npm|npm]]；
* SDK 支持 IE 9+、Firefox 10+、Chrome 54+ 和 Safari 6+。
===== 1. 准备开发环境 =====
本节介绍如何创建项目，将环信即时通讯 IM Web SDK 集成到你的项目中。
==== 新建 Web 项目 ====
新建 Easemob_quickstart 目录。在该目录下运行 npm init 命令创建 package.json 文件，然后创建以下文件:
index.html index.js 此时你的目录中包含以下文件：
Easemob_quickstart ├─ index.html ├─ index.js └─ package.json
===== 2. 集成 SDK =====
* 在 ''%%package.json%%'' 中的 ''%%dependencies%%'' 字段中加入 ''%%easemob-websdk%%'' 及对应版本：
{
"name": "web",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"dependencies": {
"easemob-websdk": "latest"
},
"author": "",
"license": "ISC"
}
* 在你的 JavaScript 文件中导入 ''%%easemob-websdk%%'' 模块：
import WebIM from 'easemob-websdk'
* ''如果是 Typescript 这样引入类型声明：''
import WebIM, { EasemobChat } from 'easemob-websdk'
===== 3. 实现用户界面 =====
index.html 的内容如下。
用于引用 webpack 打包之后的 bundle.js 文件。webpack 的配置在后续步骤中介绍。
Easemob Chat Examples
Easemob Chat Examples
===== 4. 实现消息发送与接收 =====
index.js 的内容如下。本文使用 import 方法导入 SDK，并使用 webpack 对 JavaScript 文件进行打包，以避免浏览器兼容性问题。你需要分别将代码中的 “” 替换为你之前获取的 App Key。
import WebIM from 'easemob-websdk'
const appKey = ""
let username, password
// 初始化客户端。
WebIM.conn = new WebIM.connection({
// 注意这里的 "K" 需大写。
appKey: appKey,
})
// 添加回调函数。
WebIM.conn.addEventHandler('connection&message', {
onConnected: () => {
document.getElementById("log").appendChild(document.createElement('div')).append("Connect success !")
},
onDisconnected: () => {
document.getElementById("log").appendChild(document.createElement('div')).append("Logout success !")
},
onTextMessage: (message) => {
console.log(message)
document.getElementById("log").appendChild(document.createElement('div')).append("Message from: " + message.from + " Message: " + message.msg)
},
onError: (error) => {
console.log('on error', error)
}
})
// 按钮行为定义。
window.onload = function () {
// 注册。
document.getElementById("register").onclick = function(){
username = document.getElementById("userID").value.toString()
password = document.getElementById("password").value.toString()
WebIM.conn
.registerUser({ username, password })
.then((res) => {
document
.getElementById("log")
.appendChild(document.createElement("div"))
.append(`register user ${username} success`);
})
.catch((e) => {
document
.getElementById("log")
.appendChild(document.createElement("div"))
.append(`${username} already exists`);
});
}
// 登录。
document.getElementById("login").onclick = function () {
username = document.getElementById("userID").value.toString()
password = document.getElementById("password").value.toString()
WebIM.conn
.open({ user: username, pwd: password })
.then((res) => {
document
.getElementById("log")
.appendChild(document.createElement("div"))
.append(`Login Success`);
})
.catch((e) => {
document
.getElementById("log")
.appendChild(document.createElement("div"))
.append(`Login failed`);
});
}
// 登出。
document.getElementById("logout").onclick = function () {
WebIM.conn.close();
}
// 发送一条单聊消息。
document.getElementById("send_peer_message").onclick = function () {
let peerId = document.getElementById("peerId").value.toString()
let peerMessage = document.getElementById("peerMessage").value.toString()
let option = {
chatType: 'singleChat', // 会话类型，设置为单聊。
type: 'txt', // 消息类型。
to: peerId, // 消息接收方（用户 ID)。
msg: peerMessage // 消息内容。
}
let msg = WebIM.message.create(option);
WebIM.conn.send(msg).then((res) => {
console.log('send private text success');
document.getElementById("log").appendChild(document.createElement('div')).append("Message send to: " + peerId + " Message: " + peerMessage)
}).catch(() => {
console.log('send private text fail');
})
}
}
===== 5. 运行项目 =====
本文使用 webpack 对项目进行打包，并使用 ''%%webpack-dev-server%%'' 运行项目。
1.在 ''%%package.json%%'' 的 ''%%dependencies%%'' 字段中添加 ''%%webpack%%''、''%%webpack-cli%%'' 和 ''%%webpack-dev-server%%''，并且在 ''%%scripts%%'' 字段中添加 ''%%build%%'' 和 ''%%start:dev%%'' 命令。
{
"name": "web",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "webpack --config webpack.config.js",
"start:dev": "webpack serve --open --config webpack.config.js"
},
"dependencies": {
"easemob-websdk": "latest",
"webpack": "^5.50.0",
"webpack-dev-server": "^3.11.2",
"webpack-cli": "^4.8.0"
},
"author": "",
"license": "ISC"
}
2.在项目根目录中添加 webpack.config.js 文件，用于配置 webpack。文件内容如下：
const path = require('path');
module.exports = {
entry: './index.js',
mode: 'production',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, './dist'),
},
devServer: {
compress: true,
port: 9000,
https: true
}
};
此时你的目录中包含以下文件：
Easemob_quickstart ├─ index.html ├─ index.js ├─ package.json └─webpack.config.js
目前，webpack-dev-server 4.9.2 及以上版本启动时需要在 webpack.config.js 的 devServer 中增加 static: './'，这一配置项方可正常启动。
3.在项目根目录运行以下命令，安装依赖项。
$ npm install
4.运行以下命令使用 ''%%webpack%%'' 构建并运行项目。
# 使用 webpack 打包。
$ npm run build
# 使用 webpack-dev-server 运行项目。
$ npm run start:dev
项目启动后，在页面输入用户名和密码进行注册，然后利用该用户名和密码登录。登录成功后，输入对方的用户名和要发送的消息，点击“发送”按钮发送消息，可同时打开另一页面相互收发消息。
===== 6. 参考信息 =====
可通过以下两种方式集成 SDK：
==== 方法一：通过 npm 安装并导入 SDK ====
- 在 ''%%package.json%%'' 中的 ''%%dependencies%%'' 字段中加入 ''%%easemob-websdk%%'' 及对应版本：
{
"name": "web",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"dependencies": {
"easemob-websdk": "latest"
},
"author": "",
"license": "ISC"
}
- 在你的 JavaScript 文件中导入 ''%%easemob-websdk%%'' 模块：
import WebIM from 'easemob-websdk'
==== 方法二：从官网获取并导入 SDK ====
- 下载 [[https://www.easemob.com/download/im|Easemob Chat SDK for Web]]。将 ''%%demo/src/config%%'' 中的 Easemob-chat 文件保存到你的项目下。
- 在 HTML 文件中，对 JavaScript 文件进行引用。