环信IM即时通讯使用教程（Web） - 快速开始

IM即时通讯

简介/价格/文档

文档简介：

本页面介绍如何快速集成环信即时通讯 IM Web SDK 实现单聊。实现原理：下图展示在客户端发送和接收一对一文本消息的工作流程。前提条件：有效的环信即时通讯 IM 开发者账号；创建环信即时通讯 IM 项目并获取 App Key； npm (opens new window)； SDK 支持 IE 9+、Firefox 10+、Chrome 54+ 和 Safari 6+。

*此产品及展示信息均由环信官方提供。免费试用咨询热线：400-826-7010，为您提供专业的售前咨询，让您快速了解云产品，助您轻松上云！微信咨询

免费试用、价格特惠

文档详情

本页面介绍如何快速集成环信即时通讯 IM Web SDK 实现单聊。

实现原理

下图展示在客户端发送和接收一对一文本消息的工作流程。

前提条件

有效的环信即时通讯 IM 开发者账号；
创建环信即时通讯 IM 项目并获取 App Key；
npm (opens new window)；
SDK 支持 IE 9+、Firefox 10+、Chrome 54+ 和 Safari 6+。

操作步骤

1. 准备开发环境

本节介绍如何创建项目，将环信即时通讯 IM Web SDK 集成到你的项目中。

新建 Web 项目

新建 Easemob_quickstart 目录。在该目录下运行 npm init 命令创建 package.json 文件，然后创建以下文件:

index.html：设置 Web 应用的用户界面；
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" }

3. 实现用户界面

index.html 的内容如下。

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Easemob Chat Examples</title> </head>

<body> <h2 class="left-align">Easemob Chat Examples</h2> <form id="loginForm"> <div class="col" style="min-width:

 433px; max-width: 443px"> <div class="card" style="margin-top: 0px; margin-bottom: 0px;"> <div class="row

card-content" style="margin-bottom: 0px; margin-top: 10px;"> <div class="input-field"> <label>Username</lab

el> <input type="text" placeholder="Username" id="userID"> </div> <div class="input-field"> <label>Password<

/label> <input type="password" placeholder="Password" id="password"> </div> <div class="row"> <div> <button t

ype="button" id="register">register</button> <button type="button" id="login">login</button> <button type="but

ton" id="logout">logout</button> </div> </div> <div class="input-field"> <label>Peer username</label> <input

type="text" placeholder="Peer username" id="peerId"> </div> <div class="input-field"> <label>Peer Message</l

abel> <input type="text" placeholder="Peer message" id="peerMessage"> <button type="button" id="send_peer_m

essage">send</button> </div> </div> </div> </div> </form> <hr> <div id="log"></div> </body> <script src=".

/dist/bundle.js"></script> </html>

4. 实现消息发送与接收

index.js 的内容如下。本文使用 import 方法导入 SDK，并使用 webpack 对 JavaScript 文件进行打包，以避免浏览器兼容性问题。你需要分别将代码中的 <Your app key> 替换为你之前获取的 App Key。

import WebIM from 'easemob-websdk' const appKey = "<Your app key>" let username, password // 初始化客户端。

相关的参数配置，详见 API 参考中的 `Connection` 类。 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("Lo

gout success !") }, onTextMessage: (message) => { console.log(message) document.getElementById("log").appendC

hild(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("use

rID").value.toString() password = document.getElementById("password").value.toString() WebIM.conn .registerUs

er({ username, password }) .then((res) => { document .getElementById("log") .appendChild(document.createEle

ment("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.createE

lement("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 = documen

t.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'); }) } }

注意

对于 Typescript，通过以下代码引入类型声明：

import WebIM, { EasemobChat } from 'easemob-websdk'

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

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" }

在你的 index.js 文件中导入 easemob-websdk 模块：

import WebIM from 'easemob-websdk'

方法二：从官网获取并导入 SDK

下载 Easemob Chat SDK for Web (opens new window)。将 demo/src/config 中的 Easemob-chat 文件保存到你的项目下。
在 index.html 文件中，对 index.js 文件进行引用。

<script src="path to the JS file"></script>

相似文档

环信IM即时通讯使用教程（Web） - SDK集成概述
本页介绍 Web 集成相关内容。前提条件：开始前，请注册有效的环信即时通讯 IM 开发者账号且获得 App key，见环信即时通讯云管理后台 (opens new window)。集成环境：具体见开发环境要求。引入 SDK：对于 JavaScript SDK，导入代码如下： import EC from 'easemob-websdk';
环信IM即时通讯使用教程（Web） - 私有云 SDK 集成配置
Web Vue 2 Demo：对于 Web Vue Demo，进行私有化配置需在 Vue 2 Demo 源代码 (opens new window)中进行修改。修改环境配置：在 src/utils/WebIMConfig.js 文件中，进行如下修改：
环信IM即时通讯使用教程（Web） - Web IM SDK 更新日志
版本 V4.1.4 Dev 2023-3-16（开发版）：新增特性： [IM SDK] 新增群成员自定义属性功能并增加自定义属性更新事件实现群成员设置和获取在群组中的昵称和头像等属性。 [IM SDK] 在消息创建参数中新增 deliverOnlineOnly 字段实现发消息只投递给在线用户。若开启了该功能，用户离线时消息不投递。
环信IM即时通讯使用教程（Web） - 消息管理
功能描述：环信即时通讯 IM 支持多种消息类型，开发者可以方便地对本地会话、消息进行管理，可以从服务端获取历史会话和消息，提供送达回执和已读回执能力。
环信IM即时通讯使用教程（Web） - 发送和接收消息
登录环信即时通讯后，用户可以在单聊、群聊、聊天室中发送如下类型的消息：文字消息，包含超链接和表情；附件消息，包含图片、语音、视频及文件消息；位置消息；透传消息；自定义消息。